html自适应内容的高度，底部一直在页面的底部

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，即剩余的所有高度，这可以保证页脚始终在容器的底部。