如何仅使用 CSS 使 DIV 拉伸到网页底部，高度为 100% 并溢出：自动？

发布于 2024-12-04 19:08:45 字数 2669 浏览 0 评论 0原文

萨拉姆，

我有一个 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>

原文

Salam all,

I have an HTML page with two sections, header and content, the header height is known and fixed, and the content height should fullfill the rest area of the webpage. While the content section fills the rest area of the webpage it should show a scrollbar if the contents are greater than the height of the webpage ( I don't want to see a webpage scrollbar, only content DIV scrollbar).

I have done this already (I've got the results that I want) using Javascript,

My question is : can I make the same behaviour using CSS?

Here is the code:

CSS file (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 file:

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

分享到QQ

分享到微博

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

发布评论

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

夏日落 2024-12-11 19:08:45

您可能需要像这样设置容器 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>

You probably need to set the container div absolute like this:

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

You can also try to use position: fixed.

Edit: Added my version of the example:

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

回复收藏 0 原文