css - 左侧为完整菜单，右侧为两个内容 Pane : DIV-and-CSS-only approach?

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/