플렉스 박스 스티커 바닥 글 콘텐츠 오버플로

주위에 많이있는 것 같습니다. 바닥 글이 바닥에 붙어 있지만 내용이 오버플로되면 바닥 글이 아래쪽으로 이동하지 않는 간단한 jsfiddle이 있습니다. 내용이 확장되면 바닥 글을 아래쪽으로 옮기고 싶습니다.플렉스 박스 스티커 바닥 글 콘텐츠 오버플로

HTML :

<body> 
<div id="header">This is a Header</div> 
<div id="content">asdfasdfasdfadsf 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>dasdfsfsa 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>dasdfsfsa 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>dasdfsfsa 

</div> 
<div id="footer">This is a Footer</div> 
</body>

CSS :

html, body { 
height: 100%; 
} 
body { 
min-height: 100vh; 
display: flex; 
flex-direction: column; 
} 
#header { 
background-color: red; 
min-width: 100%; 
} 
#content { 
background-color: white; 
flex: 1; 
} 
#footer { 
background-color: blue; 
}

http://jsfiddle.net/deadpickle/njvzjgje/2/

출처

2014-10-02 deadpickle

은 동적이거나 고정 된 머리말과 꼬리말의 높이입니까? – Danield

나는 동적이라고 생각해. 내 자신의 물건에서 헤더는 일반적으로 퍼센트 높이가됩니다. – deadpickle

플렉스 모델이 의미하는 바를 혼란스럽게 생각합니다. 콘텐츠의 오버 플로우를 원할 경우 플렉스 모델을 도려내거나 다른 요소에서 사용하십시오. 또한 몸체에 플렉스를 사용하면 매우 단순하고 "알몸"인 레이아웃을 사용하지 않는 한 매우 예상치 못한 결과가 발생할 수 있습니다 – Devin

문제는 body 요소에 대한 당신의 100 % 높이의 규칙입니다. 최소 높이 제한이 있으므로 그냥 제거하십시오.

Safari 5.x (vh 단위는 지원하지 않음)에서이 기능을 사용하려면 html에 100 % 높이를 남겨 둡니다. 따라서 다음과 같은 것이 있어야합니다 :

html{ 
    height: 100%; 
} 

html, body{ 
    min-height: 100%; // older browser 
    min-height: 100vh; 
}

출처

2014-10-02 20:53:24

플렉스 박스 스티커 바닥 글 콘텐츠 오버플로

답변

관련 문제