Flexbox 粘性页脚 - 'Flex: 1' 无法填充高度
Flexbox Sticky Footer - 'Flex: 1' Not Working to Fill Height
我目前正在尝试测试动态高度页脚的 flexbox 粘性页脚方法,我遇到了一段时间的问题,但我遇到了主要部分无法扩展的问题在将 'min-height: 100vh' 和 'flex-direction: column' 应用到包含主体后,使用 'flex: 1' 填充 window 的整个高度。
这让页脚仍然在页面的一半位置,我读完之后不明白为什么这不起作用。
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;
}
删除 '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>
您还没有将 display:flex
应用到 #wrapper
div。
不继承 Flexbox。
html,
body {
margin: 0;
padding: 0;
max-width: 100%;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#wrapper {
flex: 1;
display: flex;
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: lightgreen;
padding: 0 10%;
margin-top: auto;
}
footer > row {
display: flex;
}
footer > row > p {
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 25px 0;
margin: 0;
}
<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>
我目前正在尝试测试动态高度页脚的 flexbox 粘性页脚方法,我遇到了一段时间的问题,但我遇到了主要部分无法扩展的问题在将 'min-height: 100vh' 和 'flex-direction: column' 应用到包含主体后,使用 'flex: 1' 填充 window 的整个高度。
这让页脚仍然在页面的一半位置,我读完之后不明白为什么这不起作用。
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;
}
删除 '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>
您还没有将 display:flex
应用到 #wrapper
div。
不继承 Flexbox。
html,
body {
margin: 0;
padding: 0;
max-width: 100%;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#wrapper {
flex: 1;
display: flex;
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: lightgreen;
padding: 0 10%;
margin-top: auto;
}
footer > row {
display: flex;
}
footer > row > p {
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 25px 0;
margin: 0;
}
<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>