CSS 揭秘(7)--紧贴底部的页脚

Posted by liveipool on February 9, 2017

紧贴底部的页脚

有时候,我们希望页脚能够紧贴底部。一种思路是当高度固定时,通过calc()进行计算,但这种方法明显相当死板。 我们需要另外找寻一种灵活的方法,而Flexbox就能胜任:

// jade
header Liveipool
main
	p I am a text! I am a text! I am a text! I am a text!
footer
	p.fs-30 @ 2017 SYSU

// css
body {
	display: flex;
	flex-flow: column;  /*不这么设置这个属性,那三个元素会水平排列。*/
	min-height: 100vh;
}

main {
	flex: 1;
}

footer {
	color: white;
	background: #655;
}

41.1.png
这一段代码的原理是,我们将body的min-height设为100vh,这样它就会至少占据整个视口的高度。
此时我们希望的是,页头和页脚的高度由其内部因素来决定,而内容区块的高度应该可以自动伸展并占满所有可用空间。我们只需要给< main >这个容器的flex属性指定一个大于0的值就行了(比如1即可,< main >就会占满剩余所有可用空间)。(这里的原理是,如果main的flex属性值为2,footer的flex属性值为1,main和footer元素就会分别占据视口空间减去header所占空间的66.6%和33.3%)。

Flexbox真的是相当霸气,多学学,多用用。