CSS 自动高度 Div 无法正确定位自身

Question

我正在尝试获得一个简单的页面布局，其中导航栏垂直位于用户窗口的右侧，占用不超过 20% 的可用空间。左侧剩余 80% 的空间用于内容。

我希望整个页面都可以调整大小，因此无论浏览器窗口有多大或多小(在合理范围内)，内容都会根据用户的屏幕调整大小。一切正常，调整大小也很好，但导航栏有一个问题。这是 CSS 摘录:

body{
    background-color: #111111;
    font-family: Roboto;
    color: #cccccc;
    font-weight: 300;
    font-size: 14pt;
    height: 100%;
}

#content{
    width: 80%;
    float: left;
}

#navBar{
    width: 20%;
    height: 100%;
    background-color: #00C9FF;
    float: left;
    position: absolute;
}

#welcome{
    background-color: #222222;
    text-align: center;
    margin: 1%;
}

问题:

• 如果我按原样保留上面的代码，导航栏将呈现在屏幕的右侧，但它不是浏览器窗口高度的 100%。请注意，当浏览器窗口的宽度更改时，它仍会调整大小。
• 如果我将导航栏的位置设置为绝对位置 (position: absolute)，则导航栏会按照应有的方式呈现，除了它会 float 到浏览器的左侧，基本上使其完全位于应有位置的另一侧。

演示: http://codepen.io/anon/pen/YPyvzO (删除 position: absolute 以查看导航栏应该呈现的位置)

我尝试了几种不同的方法，包括将 CSS 中的“HTML”设置为高度:100% 以及导航栏的几种不同位置属性，但都无济于事。我希望仅在 CSS 中完成此操作，但我不确定是否可行。

Answer 1

添加以下内容:

    position: absolute;
    right: 0;

到#navBar。我花了很长时间才明白的一件事是 position: absolute 覆盖了一切，甚至是 float 。