Javascript 内容适配并重新调整到div容器的大小

我试图使一个页面的设置像图像。 A和B是动态高度，其宽度是静态的。C是静态尺寸，高度为500px，宽度为500px

如何使每个A&B中的内容高度彼此调整大小而不超过500px的高度

---

将此添加到a和b的CSS中

最大高度：500px

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

您可能需要添加

溢出：隐藏

如果您在a或b中的内容扩展到500px，这将使其无法在页面中显示

据我所知，完整的代码是

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


C
A.
B

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

强> <强>请张贴你的相关代码并考虑创建一个复制你的问题的方法。我想更好的描述是A就像B的标题，标题的大小根据其中的文本量而变化。我需要A和B之间的线被推或拉，整个东西保持500像素高。感谢您回复得如此迅速和有用。除了想象值（200px，最小高度：100px）之外，此代码正是您所说的您想要的。我用了这个图像。A是左上角的一个方框。它设置为200宽，最大500px，设置为占用50%的空间，仅仅因为div是空的。进一步修改，使其看起来与您提供的图像完全相同。我尝试过这种方法。它提供了外观。但是，即使我尝试使用javascript，它也无法像我尝试的那样工作。我认为这已经不可能了。无论如何，谢谢你。如果你想让A在C上面展开，而B在A下面，你可以把C完全放在右下角，让A不带浮点数，B带左浮点数。你甚至可以用一个宽度为100%的容器包装一个容器，这样它就可以保留空间。否则，我不知道你想要什么。祝你好运
<div id="wrap">
  <div class="c">C</div>
  <div class="a">A</div>
  <div class="b">B</div>
<div style="clear:both;">
</div>