css - 简单的 CSS 布局

Question

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

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

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

所以父元素的高度固定为 500px，header div 的高度固定为 20px，但 body div 的高度必须向下流动以适合父元素。将它的高度设置为 100% 会使它的高度溢出 20px，因为 height:100% 使用 parent 的高度而不考虑 child 。我看到一个使用绝对位置的解决方案，但这在 IE7 或 6 上不起作用。是否有跨浏览器解决方案，因为它是一个相对简单的布局？

编辑: 忘记提及父级可以调整大小，因此不会总是 500 像素。使用 jquery resizable，父维度可以是任何东西并且会经常改变。

编辑 2:我希望我能将此解决方案归功于多人，因为我听取了所有人的建议。基本上我给了#body高度为 480px，并使用 resizable 中的 alsoResize 选项来调整父级和主体的大小。

Answer 1

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

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

希望这是您的要求。

编辑:根据您的更新进行编辑!