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

发布于 2024-08-19 14:30:48 字数 1364 浏览 2 评论 0原文

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

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

那么有没有办法让滚动条不“溢出”底部 30px 呢？我知道我可以用另一个 DIV 来模拟它（如何创建 div 来填充页眉和页脚 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>

感谢您的帮助。

原文

Basically I want to have that middle blue body part scroll minus the scrollbar at the bottom. I know I can do this with javascript, i'm looking for more of a CSS solution.

On my actual site I have a div that is about 150px high that contains icons/images to do things and then the rest of the content needs to be scrollable vertically too, I want to find a solution for that too. I can cross that bridge next though.

So is there a way I can get that scrollbar to not "overflow" that bottom 30px? I know I can simulate it with another DIV there ( How to create div to fill all space between header and footer div ) but i'm going to be dynamically adding/removing elements so that really isn't a usable solution for me.

Here is an example of a page I threw together trying to explain what I'm attempting here:

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

thanks for your help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

土豪 2024-08-26 14:30:48

绝对定位。

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

Absolute positioning.

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

回复收藏 0 原文

若有似无的小暗淡 2024-08-26 14:30:48

使用一点 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 内动态添加内容不应破坏此布局。

Using a little JavaScript, I think we can solve your problem.

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

With the body onLoad event, the JavaScript resizes the content area to the correct height. The scrollbar does not overtake your footer, and your header and footer stay at the top and bottom of the page.

Also, adding content dynamically inside the content div should not break this layout.

回复收藏 0 原文

~没有更多了~