0
나는 잠시 동안 문제가있는 동적 높이 바닥 글을 위해 플렉스 박스 끈적한 푸터 방법을 테스트하려고합니다. 하지만 '기본 높이 : 100vh'및 '굴곡 방향 : 열'을 포함하는 바디에 'flex : 1'을 사용하여 창의 전체 높이를 채우기 위해 확장하지 않는 기본 섹션에 문제가 있습니다.플렉스 박스 끈적 푸터 - '플렉스 : 1'이 높이 채우지 못함
이것은 페이지의 절반까지 여전히 바닥 글을 남겨두고 있습니다. 왜 이것이 작동하지 않아야하는지에 대해 읽은 후에 알아낼 수 없습니다.
HTML :
<body>
<div id="wrapper">
<main>
<div id="pageContent">
<h1>Page Content</h1>
<h2>Page Content</h2>
<h3>Page Content</h3>
<h4>Page Content</h4>
</div>
</main>
<footer>
<row>
<p>Footer Content</p>
<p>Footer Content</p>
<p>Footer Content</p>
<p>Footer Content</p>
</row>
</footer>
</div>
</body>
CSS :
html, body
{
margin: 0;
padding: 0;
max-width: 100%;
background: #1a1a1a;
}
body
{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main
{
width: 100%;
margin: 0;
padding: 50px 10%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
flex: 1;
}
main > #pageContent
{
height: 100%;
width: 100%;
margin: 0;
}
footer
{
height: auto;
background: #0d0d0d;
padding: 0 10%;
margin: 0;
}
footer > row
{
display: flex;
}
footer > row > p
{
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 25px 0;
margin: 0;
}