html：
<header>
<h1>title</h1>
</header>
<main>
<p>abcdefg</p>
</main>
<footer>
<p>2018 xxxx</p>
<p>这里是页脚</p>
</footer>
法一：
main {
min-height: calc(100vh - 页头高度 - 页脚高度);
box-sizing: border-box;
}
或者法二：
把header和main用一个容器包起来
#wrapper {
min-height: calc(100vh - 页脚高度);
}
√ 法三：
body {
display: flex;
flex-direction: column; // 纵向排列
min-height: 100vh;
}
main {
flex:1;
}
ps: 这个flex属性 是 flex-grow、flex-shrink 和 flex-basis 的简写语法；任何元素只要设置了一个大于0的flex，就获得 可伸缩 的特性； flex的值负责控制多个可伸缩元素之间的尺寸分配比例。
网友评论