css - 左侧的全长菜单，右侧的两个内容窗格：仅 DIV 和 CSS 方法？

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/