html - CSS 表格单元格 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/