Question

首先，抱歉这个头衔。我写这些东西不是最好的。

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

我希望#container成为#a的高度。我还希望#b能够拉伸（或缩小，取决于）#container的100％，并且如果需要，还有一个滚动条。

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

如果无法做到这一点，我会满足于此： #container有一个固定的高度，＃b有一个固定的高度。 #a有两个块级元素（＃1和＃2），它们具有无法控制的高度。＃2应该是#a的100％，减去＃1的高度。

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

Answer 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进入一个稍微不那么模糊的模式。

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

1 个答案: