Question

我正在使用容器（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

你能帮助我吗？

Answer 1

意识到你不是针对IE5.5 / IE6市场，并且通过你的描述（在jsFiddle上渲染得很好，而不是从文件中渲染），问题似乎源于缺少doctype declaration

为了使文档正确呈现，您必须指定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让你搞乱

Answer 2

因为你在500px的小部件上有一个高度，小部件标题是50px;为什么不只是使widget-body 450px; （还减去任何额外的边距和填充）并使whidget-header和widget-body相对定位。

Answer 3

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

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

如何在不重叠包含div的情况下创建填充垂直可用空间的div？

3 个答案: