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

我的预期布局如下

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

提前致谢...:)

blasteralfred

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/