100% 大小的父级 div 的宽度和高度 - CSS答案

【问题标题】：100% Width and Height of Sizable Parent Div - CSS100% 大小的父级 div 的宽度和高度 - CSS
【发布时间】：2012-03-08 20:21:40
【问题描述】：

假设我有两个 div....

<div class="Window">
    <div class='Title'></div>
    <div class="Viewer"></div>
</div>

首先是打开的窗口，即.Window

.Window {
    width:80%;
    background-color:red;
    position:absolute;
    z-index:1;
    top:10%;
    left:10%;
    margin-left: 0%;
    bottom:10%;
}

第二个div是.Viewer

.Viewer {
    width:100%;
    height:100%;
    background-color:green;
}

如何让 .Viewer div 达到父 div 的 100% 高度和宽度。请记住，.Title 占用空间，因为它是 .Window 的标题。因此 .Viewer 必须从 .Title 下面开始

【问题讨论】：

我很困惑...您说“.Viewer div 达到父 div 的 100% 高度和宽度”，然后说“.Viewer 必须从 .Title 下方开始”...那是哪一个？您的代码对我来说似乎很好。
如果.Title 中有内容，我认为他希望.Viewer div 占据其余空间。它目前的方式将溢出.Window，至少在Chrome上。 jsfiddle.net/qHe29
这是真的@Danny。如果我在标题中有内容，它会溢出 .Window。现在我有 line-height:50px;为.Title

标签： css

【解决方案1】：

我认为如果你的 .Title 有一个固定的高度（.Title 和 .Viewer 可能有 10%，那么没有 JS 是不可能的）和 90% 的高度，例如，它应该在没有 JS 的情况下工作）。

--已编辑（没有看到其他参数。这部分是无效）--

但我也注意到您的 .Windows 没有 height 参数。 .Viewer 应该通过 100% 的高度填充什么？默认情况下，div 会根据需要扩展，因此在您的（当前）情况下，.Window 的高度将为 .Title 高度加上 .Viewer em> 高度，据我了解，这几乎就是您所要求的。

【讨论】：

有一个 top 和 bottom 值，这样会设置 div 相对于浏览器大小的高度。
自动计算具有top 和bottom 的绝对定位元素的height。
啊，错过了。没有注意到这些参数。我的错。