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

Question

我有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＆amp; D具有固定的宽度和宽度。高度。 Div B有固定的宽度。我希望自动计算Div B的高度和Div C的高度+宽度。我想在div A和​​D之间拉伸Div B和C.另外我想在div B和右边距之间拉伸Div c。因此页面不会有任何滚动条和空白区域。

我的预期布局如下所示

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

提前致谢... :)

blasteralfred

Answer 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/

Answer 2

图表的

+1！

我认为你不需要jQuery。我知道你要求一个具体的例子，但谷歌上有一些好的资源。寻找“流畅的布局”，特别是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');