Question

我需要找到一种跨浏览器的方式，在父div中包含两个div，其中第一个子节点具有固定高度，第二个子节点向下流动以包含在父节点中。

<div id="parent"><div id="header"></div><div id="body"></div></div>

     height: 500px
 _____________________
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |
|_____________________|

因此父级具有500px的固定高度，标题div具有20px的固定高度，但是主体div的高度必须向下流动以适合父级内部。给它100％的高度溢出它的高度20px因为身高：100％使用父母身高而不考虑孩子。我看到了一个使用位置绝对的解决方案，但这不适用于IE7或6.是否有一个跨浏览器解决方案，因为它是一个相对简单的布局？

编辑：忘记提及父级将可调整大小，因此不会总是500px。使用jquery resizable，父级可以是任何东西，并且会经常更改。

编辑2：我希望在接受大家的建议后，我可以为多个人提供此解决方案。基本上我给了#body一个480px的高度，并在resizable中使用了alsoResize选项来调整父级和正文的大小。

Answer 1

.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

不是动态设置父级的大小，而是控制child2的高度。

希望这就是你所要求的。

修改：根据您的更新进行编辑！

Answer 2

如果您已经知道外部容器的高度，以及内部分区的高度，您可以知道我认为剩下的div的高度。

尝试类似height: 480px;的内容。保持简单易用

Answer 3

不幸的是，这并不像你认为的那样简单。您可以使用一些javascript根据body的计算高度更改parent的高度。

但最简单的方法可能是将body的高度设置为100％，并在overflow: hidden div上设置parent。

这样，身体的高度将等于父体，但底部的20px将被剪裁。这可能是也可能是不可接受的，具体取决于您对body所做的事情，以及其内容是否可能触底。

另一种方法是使用：

#header { height: 20px; }
#body { height: 480px; }
#parent { height: auto; }

并让body成为脚本调整大小的内容，而不是parent。 parent会自动调整大小以包围header + body的总高度。

Answer 4

我的解决方案，其中父级具有动态高度：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
            }

            #parent {
                height: 80%;
                width: 500px;
                margin-left: auto;
                margin-right: auto;
            }

            #header {
                height: 120px;
                background-color: #456;
                position: relative;
                z-index: 101;
            }

            #body {
                height: 100%;
                margin-top: -120px;
                background-color: #789;
                position: relative;
                z-index: 100;
            }

            #spacer {
                height: 120px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="header"></div>
            <div id="body">
                <div id="spacer"><!-- Padding will just increase body's height. --></div>
                Body content.
            </div>
        </div>
    </body>
</html>

Answer 5

如果#parent总是有500px的高度和#header，为什么不把480px（1）放到#body？

（1）当然，您必须对任何垂直边距或填充进行折扣。

PS：IE6中的测试现在可能不值得花时间

简单的CSS布局

5 个答案: