内容适合并重新调整到 div 容器的大小答案

【问题标题】：Content fitting and re-sizing to a div container内容适合并重新调整到 div 容器的大小
【发布时间】：2013-02-16 08:52:51
【问题描述】：

我正在尝试制作一个像图像一样设置的页面。 A & B 是动态高度，它们的宽度是静态的。 C是一个静态大小，高500px，宽500px。

如何使每个 A 和 B 中的内容高度相互调整而不超过 500 像素的高度

http://i47.tinypic.com/zvyd7d.png

【问题讨论】：

请发布您的相关代码并考虑创建一个fiddle 来重现您的问题

标签： javascript html dynamic height autoresize

【解决方案1】：

将此添加到 a 和 b 的 CSS 中。

max-height:500px;.

只要你正确地逃离你的浮动（如果有的话），它就会在那里切断它。

您可能需要添加

overflow:hidden;

如果您在 a 或 b 中的内容扩展了 500 像素，这将使其无法在页面中看到。

据我了解问题的完整代码是

CSS

#wrap { width: 700px; height:500px; } /* this combines both static widths and height stays dynamic */
.a, .b { float:left; background-color:#F03; width: 200px; height:50%; min-height:100px; max-height: 500px; }
.c { background-color:#990; width: 500px; height: 500px; float: right; }

HTML

<div id="wrap">
  <div class="c">C</div>
  <div class="a">A</div>
  <div class="b">B</div>
<div style="clear:both;">
</div>

注意 C 位于顶部。那是因为它漂浮到容器的右侧，其余的试图找到 C 没有填充的空间。背景颜色仅用于视觉辅助。

http://jsfiddle.net/QW5MQ/

【讨论】：

是的，我试过这个和这样的变体。我想更好的描述是 A 就像 B 的标题，并且标题会根据其中的文本量来改变大小。我需要推动或拉动 A 和 B 之间的线，并且整个东西保持 500px 高。感谢您如此迅速和乐于助人地回复
除了虚值（200px, min-height:100px），这段代码正是你所说的你想要的。我使用了图像。 A 是左上角的一个框。它设置为 200 宽度和最大 500px，设置为占用 50% 的空间只是因为 div 为空。
jsfiddle.net/QW5MQ/1 进一步修改，看起来与您提供的图像相同。
我试过这种方式。它提供了外观。但即使我尝试使用javascript，它也不能像我试图让它工作的那样工作。我不认为它可能了。还是谢谢你。
如果您希望 A 在 C 之上展开，而 B 在 A 之下，您可以始终将 C 绝对定位在右下角，让 A 没有浮动，B 有左浮动。你甚至可以将 A 包裹在一个 width:100% 的容器中，这样它就可以保留空间。否则，我不确定你想要什么。祝你好运！