0

我正在使用容器（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 上不起作用：

页面结果

你能帮助我吗？

4

3 回答 3

1

意识到您不是针对 IE5.5 / IE6 市场，并且根据您的描述（在 jsFiddle 上呈现良好，而不是来自文件），问题似乎源于缺少doctype 声明。

为了使文档正确呈现，您必须指定一个 doctype，以拒绝浏览器陷入 quirksmode。您的文档似乎符合有效的 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供您使用

于 2012-05-29T07:26:40.087 回答
-1

因为小部件的高度为 500px，小部件标题为 50px；为什么不把 widget-body 设为 450px；（还减去任何额外的边距和填充）并使小部件标题和小部件主体相对定位。

于 2012-05-28T16:11:00.550 回答
-2

jquery 可以帮助解决这个问题。

$('.workbench').each(function(){
  var total=$(this).height();
  var headerHeight=$(this).find('.widget-header').height();
  $(this).find('.widget-body').height(total-headerHeight);
});
于 2012-05-28T16:10:26.477 回答