简单而兼容性好的Web自适应高度布局，纯CSS-优快云博客

本文介绍了一种使用纯CSS实现的自适应高度布局方案，该方案可在内容超出设定区域时自动显示滚动条，并且兼容IE9及以上版本浏览器、Chrome及Firefox。通过设置box-sizing为border-box，可以确保布局在不同浏览器中的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯CSS实现的自适应高度布局，中间内容不符自动滚动条。兼容IE9以上、chrome、FF。关键属性是box-sizing: border-box。

不废话，直接上代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{padding:0;margin:0}
    .head{
        height:90px;
        background: #090;
        position: absolute;
        width: 100%;
    }
    .content{
        height:100%;
        background: #808;
        position: absolute;
        width: 100%;
        padding:90px 0 30px 0;
        box-sizing: border-box;
        z-index: -1;
    }
    .foot{
        height:30px;
        background: #890;
        position: fixed;
        bottom:0;
        width: 100%;
    }
    .cnt{
        height:100%;
        overflow: auto;
    }
</style>
<body>
<div class="head">Head</div>
<div class="content">
    <div class="cnt">
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/>
        <div>div here</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        内容
    </div>
</div>
<div class="foot">Foot</div>
</body>
</html>