如何保持 DIV 以 100% 的高度拉伸到网页底部并溢出：仅使用 CSS 自动？答案

【问题标题】：How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?如何保持 DIV 以 100% 的高度拉伸到网页底部并溢出：仅使用 CSS 自动？
【发布时间】：2011-09-13 17:18:36
【问题描述】：

大家好，

我有一个包含两个部分的 HTML 页面，标题和内容，标题高度是已知的并且是固定的，内容高度应该填满网页的其余区域。当内容部分填充网页的其余区域时，如果内容大于网页的高度，它应该显示一个滚动条（我不想看到网页滚动条，只有内容 DIV 滚动条）。

我已经使用 Javascript 完成了这项工作（我已经得到了我想要的结果），

我的问题是：我可以使用 CSS 做出同样的行为吗？

代码如下：

CSS 文件（site.css）：

html, body 
{ 
height:100%; 
width:100%;     
padding:0;
margin:0; 
}

#header 
{
height:85px; 
width:100%; 
background-color : yellow;
}

#container
{
height: 100%;
width:auto; 
background-color : green;
padding:2px;
margin: 0 auto;
}

#maindiv
{
height:100%;
width:100%; 
overflow:auto;
}

HTML 文件：

<!DOCTYPE html>
<html>
<head>
<link href="Site.css")" rel="stylesheet" type="text/css"/>
</head>
<body onresize="onheightchanged()" onload="onheightchanged()">
    <table id="header">
        <tr>
            <td>
            some headers <br /> 
            some headers <br /> 
            some headers <br /> 
            some headers <br /> 
            </td>
        </tr>
    </table>
    <div id="container">
        <div id="maindiv">
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        </div>
    </div>

    <script type="text/javascript">
        function getDocHeight() {
            var D = document;
            return Math.max(
                    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
                    Math.max(D.body.clientHeight, D.documentElement.clientHeight));
        }


        function onheightchanged() {
            var container = document.getElementById("container");
            var newheight = getDocHeight() - 90; // 90 = header height (85) + padding/margin (5)
            container.style.height = newheight + "px";
        }
    </script>
</body>
</html>

【问题讨论】：

标签： javascript css html height

【解决方案1】：

您可能需要像这样设置容器 div 绝对值：

#container {
   position: absolute;
   top: 85px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   overflow: auto;
   background-color : green;
}

您也可以尝试使用position: fixed。

编辑：添加了我的示例版本：

<!DOCTYPE html>
<html>
<head>
<style>
    html, body 
    { 
    height:100%; 
    width:100%;     
    padding:0;
    margin:0; 
    }

    #header 
    {
    height:85px; 
    width:100%; 
    background-color : yellow;
    }

    #container {
       position: absolute;
       top: 85px;
       bottom: 50px;
       left: 200px;
       right: 30px;
       overflow: auto;
       background-color : green;
    }

    #maindiv
    {
    height:100%;
    width:100%; 
    overflow:auto;
    }
    </style>
    </head>
<body>
<table id="header">
<tr>
       <td>
        some headers <br /> 
        some headers <br /> 
        some headers <br /> 
        some headers <br /> 
        </td>
    </tr>
</table>
<div id="container">
    <div id="maindiv">
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
    </div>
</div>
</body>
</html>

【讨论】：

感谢您的回答，这个解决方案对 IE 和 Opera 非常有效，Chrome 也可以，但是当我调整页面大小时，FF 6.0.2 仍然显示网页滚动条。
奇怪，在我的 FF 6.0 中运行良好。滚动条来自容器。您可以通过调整左、右和底部位置来测试它，以使容器不会接触页面边框。它应该更好地显示页面的行为方式。
我没有运气，调整页面大小时DIV高度不会自动刷新，您需要按F5才能获得正确的行为，有什么线索吗？
您记得从页面中删除所有 javascript 内容吗？
我确实做到了，因为您的解决方案的第一次测试。

【解决方案2】：

使用 overflow-y:hidden; 在该 css 中产生滚动。

【讨论】：

【解决方案3】：

overflow:auto 不适用于基于百分比的高度。您还可以在onHeightChanged() 函数中设置#maindiv 的高度，之后overflow:auto 应该可以工作。

【讨论】：

你又在向我介绍 javascript，我已经得到了我想要使用 javascript 的结果，我只想要它使用 CSS。