在具有“页脚”的页面上设置 DIV 的高度属性答案

【问题标题】：Set the height property of a DIV on a page that has a "footer"在具有“页脚”的页面上设置 DIV 的高度属性
【发布时间】：2010-01-26 19:34:16
【问题描述】：

基本上我想让中间的蓝色身体部分滚动减去底部的滚动条。我知道我可以用 javascript 做到这一点，我正在寻找更多的 CSS 解决方案。

在我的实际网站上，我有一个大约 150 像素高的 div，其中包含用于执行操作的图标/图像，然后其余内容也需要垂直滚动，我也想找到一个解决方案。不过接下来我可以过那座桥。

那么有没有办法让滚动条不会“溢出”底部 30 像素？我知道我可以在那里用另一个 DIV (How to create div to fill all space between header and footer div) 模拟它，但我将动态添加/删除元素，所以这对我来说真的不是一个可用的解决方案。

这是我拼凑的一个页面示例，试图解释我在这里尝试的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    height:100%;
    margin-bottom:-30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids<div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>

感谢您的帮助。

【问题讨论】：

标签： css html height

【解决方案1】：

绝对定位。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>

【讨论】：

在 DIV#content 中，使用 'top: 20px' 它似乎也对我有用。

【解决方案2】：

使用一点 JavaScript，我想我们可以解决您的问题。

<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 

BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#header
{
    top: 0px;
    height: 20px;
    width: 100%;
    position: absolute;
    background-color: green;
}
DIV#content
{
    top: 20px;
    bottom:30px;
    width: 100%;
    background-color:blue;
    position: absolute;
    overflow:auto;
}
DIV#footer
{
    bottom: 0px;
    height: 30px;
    width: 100%;
    background-color: red;
    position:absolute;
}
</style>
<script type="text/JavaScript">
function adjustContent()
{
    document.getElementById("content").style.height = window.height-50;
}
</script>
</head>
<body onLoad="adjustContent()" >
    <div id="header">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div id="footer">bottom bar</div>
</body>
</html>

通过正文 onLoad 事件，JavaScript 将内容区域的大小调整为正确的高度。滚动条不会超过您的页脚，并且您的页眉和页脚始终位于页面的顶部和底部。

此外，在内容 div 中动态添加内容不应破坏此布局。

【讨论】：

Javascript 也是我想到的唯一其他解决方案，看来我可能需要走这条路。