左边的全长菜单,右边的两个内容窗格:DIV-and-CSS-only方法？

Question

我正在尝试创建一个类似于以下内容的简单网页:

我有三个DIV,如下:

<div class="leftNav">       
</div>
<div class="topPanel">          
</div>
<div class="bottomPanel">           
</div>

这是CSS:

.leftNav
{
    width: 20%;
    height: 100%;
    float: left;    
}

.topPanel
{
    width: 80%;
    height: 50%;
    float: right;
}
.bottomPanel
{
    width: 80%;
    height: 50%;
    float: right;
}

然而,最终结果看起来完全不合时宜.是否有可能用DIV和CSS创建这样的东西？

Answer 1

有几种方法可以做到这一点.

您只需添加以下内容即可修复原始方法:

html, body {
    height: 100%;
    overflow: hidden; /* to hide any scrollbars that might appear */
}

请参阅: http ://jsfiddle.net/thirtydot/n4wr4/