css - div内的CSS Div全宽和全高，相对于彼此

Question

我正在尝试构建以下布局：

+-----------------------------------+
|                                   |
+-----------------------------------+
+-----------------------------------+
| +-------------------------------+ |
| |                               | |
| +-------------------------------+ |
| +-----+  +-------------+ +------+ |
| |     |  | +---------+ | |      | |
| |     |  | |         | | |      | |
| |     |  | |         | | |      | |
| |     |  | +---------+ | |      | |
| |     |  | +---+ +---+ | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |   
| |     |  | +---+ +---+ | |      | |
| +-----+  +-------------+ +------+ |
+-----------------------------------+

但由于某种原因，div 不会扩展到全宽或全高：http: //jsfiddle.net/vmpgf/

有什么建议么？

谢谢

Answer 1

好吧，这会让你非常接近，我在右边的 div 上有一些问题，出于某种原因，它只适合三个中的总 div 宽度加起来为 99%，所以我确信这不是“答案“但会让你靠近。

HTML -

<div id="divbanner">Top Banner</div>
<div id="container">
    <div id="banner">
        Banner
    </div>
    <div id="left">
        Left
    </div>
    <div id="center">
        <div id="centertop">
            Center Top
        </div>
        <div id="centerleft">
            Center Left
        </div>
        <div id="centerright">
            Center Right
        </div>
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS -

#divbanner {
    width: 100%;
    background: #F45;
}
#container {
    width: 100%;
    background: #00C;
}
#banner {
    width: 100%;
    background: #778;
}
#left {
    width: 30%;
    background: #cc5;
    display: inline-block;
}
#center {
    width: 39%;
    background: #cc7;
    display: inline-block;
}
#right {
    width: 30%;
    background: #cc7;
    display: inline-block;
}
#centertop {
    width: 100%;
    background: #445;
}
#centerleft {
    width: 50%;
    background: #c62;
    float: left;
}
#centerright {
    width: 50%;
    background: #062;
    float: right;
}​

​在这里试试：http: //jsfiddle.net/tyDq5/