css - 如何创建一个填充垂直可用空间而不与包含的 div 重叠的 div？

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

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

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

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

<?xml version="1.0"?>
<html>
    <head>
        <style type="text/css">
            .workbench {
                width: 100%;
                height: 100%;
                background: white;
            }
            .widget {
                width: 100px;
                height: 500px;
                position: absolute;
                top: 50px;
                left: 50px;
                border: solid 1px black;
                margin: 2px;
            }
            .widget-header {
                height: 50px;
                border: solid 1px red;
                margin: 2px;
            }
            .widget-body {
                position: absolute;
                top: 50px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                border: solid 1px blue;
                overflow: hidden;
                margin: 2px;
            }
        </style>
    </head>
    <body>
        <div id="workbench" class="workbench">
            <div id="widget" class="widget">
                <div id="widget-header" class="widget-header">
                    Header
                </div>
                <div id="widget-body" class="widget-body">
                    Body
                </div>
            </div>
        </div>
    </body>
</html>

这在 FireFox 和 Chrome 上工作得很好，但在 Internet Explorer 8 上不起作用:

Page result

你能帮帮我吗？

最佳答案

意识到您的目标不是 IE5.5/IE6 市场，并且根据您的描述(在 jsFiddle 上呈现良好，而不是来自文件)，问题似乎源于缺少 doctype declaration .

为了正确呈现文档，您必须指定文档类型，以防止浏览器陷入怪癖模式。您的文档似乎符合有效的 XHTML 约定，因此您可以使用 XHTML 过渡文档类型来指示 IE8 在标准模式下呈现，或者使用 HTML5 文档类型(以及 HTML5 shim/shiv ，如果您将使用 HTML5 的语义作为好吧)。

为了方便起见，XHTML 过渡文档类型声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意:Modernizr包含自己的 HTML5 shiv，建议无论如何简化开发。

这是 jsFiddle给你乱搞

关于css - 如何创建一个填充垂直可用空间而不与包含的 div 重叠的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10787387/

css - 如何创建一个填充垂直可用空间而不与包含的 div 重叠的 div？

上一篇：html - 如何为移动设备设计可扩展的 HTML5 网站？

下一篇：html - IE 9 thead 定位问题