Css 如何创建填充垂直可用空间的div，而不与包含的div重叠？

我正在处理一个带有容器（div）的布局，容器中有两个元素，一个div用于标题，另一个div用于内容。 标题div具有固定高度，内容的div必须填充可用空间。 容器div有自己的样式，不能重叠。 我的目标是创建简单的基于div的元素，以便在网页上配置简单的小部件

我检查了其他类似的问题，如：

但这些解决方案都不适用于我

我设法得到了这个html/css：

.工作台{
宽度：100%；
身高：100%；
背景：白色；
}
.小部件{
宽度：100px；
高度：500px；
位置：绝对位置；
顶部：50px；
左：50px；
边框：实心1px黑色；
保证金：2倍；
}
.widget头{
高度：50px；
边框：实心1px红色；
保证金：2倍；
}
.小部件主体{
位置：绝对位置；
顶部：50px；
底部：0px；
左：0px；
右：0px；
边框：纯色1px蓝色；
溢出：隐藏；
保证金：2倍；
}
标题
身体

这在FireFox和Chrome上非常有效，但在Internet Explorer 8上不起作用：

---

你能帮我吗？

jquery可以帮上忙

$('.workbench').each(function(){
  var total=$(this).height();
  var headerHeight=$(this).find('.widget-header').height();
  $(this).find('.widget-body').height(total-headerHeight);
});

---

因为小部件上的高度为500px，小部件标题为50px；为什么不让widget主体变成450px；（同时减去任何额外的边距和填充）并使whidget标题和小部件主体相对定位。

意识到您的目标不是IE5.5/IE6市场，并且根据您的描述（在JSFIDLE上呈现良好，而不是从文件中），问题似乎源于缺少

为了正确呈现文档，必须指定doctype，以阻止浏览器进入怪癖模式。您的文档似乎符合有效的XHTML约定，因此您可以使用XHTML过渡doctype来指示IE8以标准模式呈现，或者使用HTML5 doctype（如果您也使用HTML5的语义，还可以使用）

为了方便起见，XHTML过渡doctype声明：

注意：包含一个HTML5 shiv，无论怎样都推荐它以简化开发

---

这是一个让你胡思乱想的问题

你测试的是什么版本的Internet Explorer？用它做了一个测试，并在几乎所有的IE发行版上进行了渲染，而这个问题似乎只在版本6和5.5上重现。你真的想去那里吗？使用fiddle IE8显示兼容性视图按钮，呈现正确，从本地文件加载html结果就像问题中的屏幕截图，你知道为什么IE8呈现的fiddle和本地文件不同吗？@EliranMalka非常感谢使用fiddle，我可以分辨出fiddle html和我的html的区别，我使用的是xml头，而IE8需要@Eliran:无用的注释才能正确呈现。没有得到你链接的目的。我说jquery可以帮上忙。如果你能证明它不能。把它拿走。不要做琐碎的陈述。但是在构建小部件时，jquery绝对是帮助处理此类情况的有效选择。jquery显然可以提供帮助，但OP没有提到使用它，而且为临时解决方案提供外部库似乎是多余的。最好是：）是的，在示例中小部件的高度是固定的，但在实际使用中，我有不同高度的不同小部件，我需要一个解决方案来处理它们中的任何一个，而每次都不固定小部件的主体高度。是的，doctype是问题所在，非常感谢提供有用的信息！我去检查一下湿巾