如何使用 jQuery 或 CSS 自动调整（拉伸）div 的高度和宽度答案

【问题标题】：How to auto adjust (stretch) div height and width using jQuery or CSS如何使用 jQuery 或 CSS 自动调整（拉伸）div 的高度和宽度
【发布时间】：2012-08-11 21:38:16
【问题描述】：

我有 4 个 id 分别为 A、B、C 和 D 的 div，如下所示；

<div id="A"></div>
<div id="content">
    <div id="B"></div>
    <div id="C"></div>
</div>
<div id="D"></div>

Div A & D 具有固定的宽度和高度。 Div B 具有固定宽度。我想要自动计算 Div B 的高度和 Div C 的高度 + 宽度。我想在 div A 和 D 之间拉伸 Div B 和 C。我还想在 div B 和右边距之间拉伸 Div c。因此该页面不会有任何滚动条和空白空间。

我的预期布局如下所示

如何使用 jquery / css 实现这一点？任何人都有解决方案，请给我一个小提琴/演示？？

提前谢谢...:)

爆破

【问题讨论】：

整体结构的高度是固定的，还是应该扩大到父元素的100%高度？您需要支持哪些浏览器？
我专注于 firefox，但我认为，如果我使用 jquery 计算长度，我可以拥有跨浏览器支持。高度：100% 在浏览器中不起作用

标签： javascript jquery css

【解决方案1】：

好吧，尽管问了，我还是不完全确定你想要什么。

我认为您也不必为此使用 jQuery。怎么样？

Live Demo

CSS：

#container {
    position: relative;
    width: 200px;
    height: 200px;
}
#top, #left, #right, #bottom {
    position: absolute
}
#top {
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b7f0
}
#left {
    top: 50px;
    width: 50px;
    bottom: 50px;
    background: #787878
}
#right {
    top: 50px;
    left: 50px;
    right: 0;
    bottom: 50px;
    background: #ff7e00
}
#bottom {
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #9dbb61
}

HTML：

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
</div>

或者也许你想要这样的代替？ http://jsfiddle.net/thirtydot/4BR9s/1/

【讨论】：

我想让容器填满屏幕，即宽高100%
@blasteralfred：我预测可能是这样。请参阅我答案底部的第二个版本。
正是我要找的……谢谢……:)

【解决方案2】：

+1 图表！

我认为您不需要 jQuery。我知道您要求为您提供一个具体的示例，但是 Google 上出现了一些很好的资源。寻找“流体布局”，特别是在这里：http://css-tricks.com/the-perfect-fluid-width-layout/

【讨论】：

【解决方案3】：

这里是一个 jquery 'animate' 的例子：

$('your_selector').animate({
'height':'<your_calculated_height>',
'width':'<your_calculated_width>'
},'slow');

【讨论】：