Question

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

在我的实际网站上，我有一个大约150px高的div，包含用于处理的图标/图像，然后其他内容也需要垂直滚动，我也希望找到解决方案。我可以接下来过那座桥。

那么有没有办法让滚动条不会“溢出”底部30px？我知道我可以用另一个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>

感谢您的帮助。

Answer 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>

Answer 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>

使用body onLoad事件，JavaScript会将内容区域的大小调整为正确的高度。滚动条不会超过页脚，页眉和页脚会保留在页面的顶部和底部。

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

在具有“页脚”的页面上设置DIV的height属性

2 个答案: