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

【问题标题】：How to create a div filling the vertical available space without overlapping the containing div?如何创建一个 div 填充垂直可用空间而不重叠包含的 div？
【发布时间】：2012-06-02 23:34:42
【问题描述】：

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

你能帮帮我吗？

【问题讨论】：

您在哪个版本的 Internet Explorer 上进行测试？
为此制作了fiddle 并在几乎所有 IE 版本上呈现，并且该问题似乎仅在版本 6 和 5.5 上重现。 你真的想去那里吗？
使用小提琴IE8显示兼容性视图按钮并且渲染是正确的，从本地文件加载html结果就像问题中的屏幕截图一样，你知道为什么IE8在fiddle和本地文件？
@EliranMalka 非常感谢您使用 fiddle，我可以分辨出 fiddle html 和我的区别，我使用的是 xml 标头，而 IE8 正确渲染需要

标签： css layout html cross-browser

【解决方案1】：

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

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

【讨论】：

jQuery is not the answer to everything.
@Eliran：没用的评论。没有得到你的链接的目的。我说 jquery 可以提供帮助。如果你能证明它不能。点它。不要做琐碎的陈述。但是在构建小部件时，jquery 绝对是帮助解决此类情况的非常有效的选择。
jQuery 显然可以提供帮助，但是 OP 没有提到使用它，并且包含用于 Ad-Hoc 解决方案的外部库似乎是多余的。最好是 KISS :)

【解决方案2】：

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

【讨论】：

是的，在示例中，小部件的高度是固定的，但在实际使用中，我有不同高度的不同小部件，我需要一个解决方案来处理它们中的任何一个而不固定小部件主体高度时间

【解决方案3】：

意识到您不是针对 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 供你玩弄

【讨论】：

是的，文档类型是问题所在，非常感谢您提供的有用信息！我会检查shiv