Flexbox 고정 바닥글 문제?

StackOverflow https://stackoverflow.com//questions/23026696

문제

저는 끈적한 바닥글을 만들기 위해 Flexbox를 가지고 놀았는데 어떤 이유로 내 div 중 하나가 바닥글과 겹치고 있습니까?창을 더 큰 모니터로 드래그하면 바닥글이 완벽해집니다.내가 도대체 ​​뭘 잘못하고있는 겁니까?

또한 저는 다음과 같은 다른 방법 대신 이 방법을 사용하는 것을 선호합니다. table 방법.

내 HTML 레이아웃은 다음과 같습니다.

<body>
    <div class="mainContent">...</div>
    <div class="footer">...</div>
</body>

내 안에 mainContent div 헤더를 포함하여 내 웹사이트의 전체 상단 부분이 있습니다.나는 그것을 전체 콘텐츠로 사용한 다음 바닥글을 갖기만 하면 됩니다.

내가 가지고 있는 CSS는 다음과 같습니다.

body
{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.mainContent
{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
}

.footer
{
    height: 75px; 
    background: #222;
    color:#EEE;
}

나는 이것을 시도했습니다 : http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

하지만 현재 겪고 있는 것과 동일한 문제가 발생합니다.

업데이트

의견에서 요청한 대로 기본 콘텐츠 div를 다음으로 설정했습니다. overflow: auto; 그런데 내 내용이 바닥글에 가려졌습니다.이 문제를 어떻게 해결하나요?

도움이 되었습니까?

해결책

CSS에 몇 가지 규칙을 추가하여 검색 결과를 얻을 수 있습니다. 현재 공간이 줄어들면 주요 내용이 더 많은 공간을 차지 해야하는 것이 기본적으로 있습니다.따라서 바닥 글은 실제로 겹치지 않고 오히려 크기가 감소합니다.

여기에 몇 달 전에 수행 한 것입니다 ... CSS의 많은 규칙은 유산이므로 조심하십시오. 그러나 나는 그것이 당신이하고자하는 것을 목표로하는 것에 가깝다고 믿습니다 : http://plnkr.co/edit/o2bawvg3xv4yjwawwmyr?p=preview

그러나 실제로 Flex CSS 규칙을 만드는 데 사용하는 것이 좋습니다. "Nofollow"> http://the-echoplex.net/flexyboxes/

다른 팁

CSS3 FlexBox 또는 Grid를 사용 하여이 문제를 해결하기 위해 CSS3 FlexBox 또는 Grid를 사용하여 이러한 빠르고 견고한 솔루션을 발견하면 많은 시간을 보냈습니다.이게 도움이 되길 바란다.

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
.

IE 및 Chrome 모두에 대해 작동해야합니다 : 

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1 0 auto;
}

footer, header {
    flex-shrink: 0;
}
.

그리드 레이아웃을

로 시도 할 수도 있습니다. 
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
}

footer {
  grid-row: 3/4;
}
.

내 웹 사이트를 참조하십시오 : http://matthiassommer.it/웹 / 자바 스크립트 / 스티커 - 풋내기 -CSS3-FlexBox 그리드 /

답변이 이미 승인되었다는 것을 알고 있지만 여기에는 필요한 코드(및 설명할 일부 자바스크립트)만 사용하는 매우 간단한 예가 있습니다.

https://codepen.io/alexmccabe/pen/RgMBjJ

현재 상황은 다음과 같습니다.

먼저 body 그리고 html 브라우저 높이의 100%까지.

html,
body { height: 100%; }

그런 다음 래퍼 요소를 설정하여 min-height 100%로 설정하고 플렉스를 표시합니다.열은 요소가 서로 옆에 배치되지 않도록 합니다.

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

이제 바닥글은 margin-top ~의 auto.브라우저 창 하단에 위치합니다.

.site-footer {
    margin-top: auto;
}

메모:이전 브라우저 스타일을 포함했는지 확인하고 Safari 8을 주의하세요.때로는 까다로운 일이 될 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top