左边的全长菜单，右边的两个内容窗格：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/

Answer 2

也许您需要在容器div中获取这三个div并设置该容器的大小。见这里：http://jsfiddle.net/Rorok_89/A6Uf7/