html标签元素为:
<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>
首先,我们需要在元素上设置display:flex。如果父元素()的三个块元素,使用Flexbox切换布局,还需要设置flex-flow:column,否则这三个块会排成一行。
从实际出发,需要给设置min-height值为100vh,让内容不足视窗高度时也能占据整个视窗。
即使给指定了最小高度,但每个盒子的高度仍取决于其内容大小。
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}
flex属性是flex-grow、flex-shrink和flex-basis三个属性缩写。任何元素设置了flex大于0,元素就会灵活的控制自己的尺寸,来适配容器的剩余空间。例如,如果设置了flex:2,