1、老方法:
HTML
只放body部分里面的内容:
<div class="box">
<div class="box-wrap">
<div>-这里放你的页面内容-</div>
</div>
</div>
<div class="footer">-底部内容-</div>
css
html,body{height:100% ;margin:0}
.box{min-height:100%;height:auto;}
/*这里很关键*/
.box-wrap{padding-bottom:80px}
.footer{height:80px;margin-top:80px;}
不管你的内容高度是多少,底部的内容一直在页面的最下面了
2、新方法
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
上面代码写在容器上面,指定采用 Grid 布局。核心代码是grid-template-rows
那一行,指定垂直高度怎么划分,这里是从上到下分成三部分。第一部分(页眉)和第三部分(页脚)的高度都为auto
,即本来的内容高度;第二部分(内容区)的高度为1fr
,即剩余的所有高度,这可以保证页脚始终在容器的底部。