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

Question

我有4个div，其ID为A，B，C和D，如下所示；

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

分区A和D具有固定的宽度和高度。 Div B具有固定宽度。 我想自动计算Div B的高度和Div C的高度+宽度。 我想在A和D区间之间拉伸Divs B和C。我也想在B和右边界之间拉伸Div c。 因此该页面将没有任何滚动条和空白空间。

我的预期布局如下

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

在此先感谢... :)

炸药

Answer 1

好吧，尽管提出了疑问，但我仍然不确定自己想要什么。

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

现场演示

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/

Answer 2

图表为+1！

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

Answer 3

这是jquery'animate'的示例：

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