使容器 div 成为一个子 div 的高度，并使另一个子 div 容器的高度答案

【问题标题】：Make container div be height of one child div, AND make the other child div height of container使容器 div 成为一个子 div 的高度，并使另一个子 div 容器的高度
【发布时间】：2009-09-06 04:15:58
【问题描述】：

首先，很抱歉这个标题。我不是最擅长写那些东西。

我有一个容器 div（我们称之为 #container），其中包含两个 div（#a 和 #b）。我无法控制这两个 div 的内容。

我希望#container 是#a 的高度。我还希望#b 拉伸（或缩小，取决于）#container 的 100%，并在必要时有一个滚动条。

这听起来应该非常简单，但我花了几个小时试图让它发挥作用。

如果这是不可能的，我会接受这个： #container 有固定高度，#b 有固定高度。 #a 有两个高度不可控制的块级元素（#1 和#2）。 #2 应该是 #a 的 100%，减去 #1 的高度。

请告诉我其中一种是可能的！

【问题讨论】：

发布一些代码或详细说明您的页面布局。
你的第一个要求是#container 是#a 的高度，这意味着如果你想显示#b，总会有一个滚动条，因为#a 占据了#container 的所有高度
你会接受几行 JavaScript 吗？
事实证明，Javascript 完全没有必要。见下文。

标签： html css layout

【解决方案1】：

我喜欢这些 CSS 更改（以一种自虐的方式）。我很惊讶我想出了一个解决方案：

<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#container { width: 600px; height: auto; margin: 0 auto; background: orange; position: relative; }
#left { background: green; width: 300px; }
#right { overflow: auto; background: yellow; width: 300px; position: absolute; top: 0; bottom: 0; right: 0; }
</style>
</head>
<body>
<div id="container">
<div id="left">
<p>f this is not possible, I would settle for this: #container has a fixed height, #b has a fixed height. #a has two block-level elements (#1 and #2) that have uncontrollable heights. #2 should be 100% of #a, minus the height of #1.</p>
<div id="right">
<p>I have a container div (let's call it #container) which contains two divs (#a and #b). I am not in control of the content of these two divs.</p>
<p>I want #container to be the height of #a. I also want #b to stretch (or shrink, depending) to 100% of #container, and have a scrollbar, if necessary.</p>
</div>
</div>
</body>
</html>

在左边大于右边的地方试试，它仍然有效。

可能值得添加一个 DOCTYPE 来强制 IE 进入稍微不那么糟糕的模式。

【讨论】：

经过更多的工作，这并不完美。它在 IE6 中不起作用，正如 ALA 文章中所述：alistapart.com/articles/conflictingabsolutepositions（诅咒！）因为我已经有了 IE6 的条件样式表，所以我只是将 div#right 绝对定位在右上角，并给它一个固定的高度。它不会延伸到#container 的高度，但至少它不会像以前那样直接穿过#container 的底部。