我需要找到一种跨浏览器的方式，将两个 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 选项来调整父级和主体的大小。
最佳答案
.parent { height : auto; }
.child1 { height : 20px; }
.child2 { height : 480px; }
不是动态设置父级的大小，而是控制 child2 的高度。
希望这是您的要求。
编辑:根据您的更新进行编辑!
关于css - 简单的 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3349701/