CSS table-cell 100％宽度

Question

我正在尝试创建这样的布局：

这是我到目前为止所做的：

HTML

<div id="wrapper">
<div id="top">
    <div id="top">100% width and  45px height </div>
</div>
<div id="middle">
    <div id="middleleft">Middle Left 20%</div>
    <div id="middlecenter">Center 60%</div>
    <div id="middleright">Middle Right 20%</div>
</div>
<div id="bottom">
    <div id="bottom">100% width and 30% height</div>
</div>

CSS

#top{
    width:???;
    height: 45px;
}
#bottom {
    width: ???;
    height: 30%;
}

http://jsfiddle.net/Jn6x6/

但是我无法取得顶峰而且取得100％的成绩。

这是正确的方法，还是我应该尝试不同的方法？

感谢。

Answer 1

添加

#wrapper #middle {
    display:table;
    width: 100%;
    height: 100%;
}

到你的JsFiddle的CSS。

请参阅http://jsfiddle.net/Jn6x6/1/

Answer 2

确实

#top,
#bottom {
   width: 100%;
}

不能满足您的需求？

Answer 3

目前      ＆LT; div id =“top”＆gt;          ＆LT; div id =“top”＆gt; 100％宽度和45px高度＆lt; / DIV＆GT;      ＆LT; / DIV＆GT;

尝试给第二个id命名为“top_box”，并给第一个id（#top）宽度为100％，第二个（#top_box）宽度为 inherit

另外，尝试在新创建的HTML文件（example.html）中测试HTML代码，然后在浏览器中打开它。