另一个 CSS 高度 100% 问题

发布于 2024-09-19 19:32:42 字数 337 浏览 6 评论 0原文

更新：我认为信息太多了。我的问题是：如何使#middle 的高度为以下示例中剩余空间的 100%：

<body>
    <div id="big">
        <div id="header"></div>
        <div id="middle"></div>
        <div id="btm"></div>
    </div>
</body>

#big、body、html 的高度均为 100%。
页眉和底部的高度均为120px；

原文

UPDATE: I think there was too many information. Here's my question: how to make the height of #middle 100% of the remaining space in the following exampl:

<body>
    <div id="big">
        <div id="header"></div>
        <div id="middle"></div>
        <div id="btm"></div>
    </div>
</body>

height of #big, body, html is all 100%.
Height of header and bottom are 120px;

分享到QQ

分享到微博

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

发布评论

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

一梦等七年七年为一梦 2024-09-26 19:32:42

更新：更改了我的示例以匹配您更新的问题

这是您的布局的工作示例。在 IE8、IE7、Firefox 和 Chrome 中测试。

这里的关键是不要将 middle 的高度设置为 100%。相反，您可以绝对定位它，top和bottom等于header和btm元素的高度（在你的情况下，120px）。

如果将 middle 元素的高度设置为 100%，它将与 big 元素的高度相同，即 body 标记的 100%，因此您的middle 元素会太大，导致水平滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            background-color: #EEEEEE;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #big
        {
            width: 100%;
            height: 100%;
        }
        #header
        {
            width: 100%;
            background-color: #DDD;
            height: 120px;
        }
        #btm
        {
            width: 100%;
            height: 120px;
            position: absolute;
            bottom: 0px;
            background-color: #999;
        }
        #middle
        {
            width: 100%;
            position: absolute;
            top: 120px;
            bottom: 120px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="header">
            header
        </div>
        <div id="middle">
            middle
        </div>
        <div id="btm">
            bottom
        </div>
    </div>
</body>
</html>

Update: Changed my example to match your updated question

Here's a working example of your layout. Tested in IE8, IE7, Firefox, and Chrome.

The key here is NOT to set this height of middle to 100%. Instead, you position it absolutely, with top and bottom equal to the height of your header and btm elements (in your case, 120px).

If you set the height of the middle element to 100%, it will be the same height as the big element, which is 100% of the body tag, and hence your middle element will be too large, causing horizontal scroll bars.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            background-color: #EEEEEE;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #big
        {
            width: 100%;
            height: 100%;
        }
        #header
        {
            width: 100%;
            background-color: #DDD;
            height: 120px;
        }
        #btm
        {
            width: 100%;
            height: 120px;
            position: absolute;
            bottom: 0px;
            background-color: #999;
        }
        #middle
        {
            width: 100%;
            position: absolute;
            top: 120px;
            bottom: 120px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="header">
            header
        </div>
        <div id="middle">
            middle
        </div>
        <div id="btm">
            bottom
        </div>
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~