页面代码
<header>
<h1>Site name</h1>
</header>
<main>
<p>Bacon Ipsum dolor sit amet... <!-- Filler text from baconipsum.com --></p>
</main>
<footer>
<p>© 2015 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p>
</footer>
如下
初始页面
当减少内容后
减少内容
Flexbox解决方案：
- 首先
body {
display: flex;
flex-flow: column;
}
- 需要给<body>设置min-height值为100vh，让<body>内容不足视窗高度时也能占据整个视窗。
- 即使给<body>指定了最小高度，但每个盒子的高度仍取决于其内容大小。这里我们需要在页头和页脚设置高度，但其内容的高度自动伸缩的来适配剩余空间。我们可以在<main>上设置flex值大于0(常用的是1)：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}
最终效果
仅用四行代码厉害哟~
- flex小知识：
flex属性是flex-grow、flex-shrink和flex-basis三个属性缩写。任何元素设置了flex大于0，元素就会灵活的控制自己的尺寸，来适配容器的剩余空间。例如，如果<main>设置了flex:2，<footer>设置了flex:1，那么页脚的高度是主内容高度的二分之一，同样的，如果值设置的是4和2而不是2和1，他们效果是一样的，因为他们的倍数比例值一样
网友评论