CSS自动高度Div不能正确定位自身

Question

我试图获得一种简单的页面布局，其中导航栏沿用户窗口的右侧垂直放置，不超过可用空间的20％。 左侧剩余的80％空间用于内容。

我希望整个页面的大小都可以调整，因此无论浏览器窗口大小是多少（在一定程度上），内容都会根据用户的屏幕大小进行调整。 一切正常，并且调整大小很好，但是navBar存在一个问题。 这是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%;
}

问题：

• 如果我按原样保留上面的代码，则navBar会按原样显示在屏幕的右侧，但不是浏览器窗口高度的100％。 请注意，更改浏览器窗口的WIDTH时，它仍会调整大小。
• 如果我将navBar的位置设置为绝对（位置：绝对），则导航条将完全呈现其应呈现的方式，除了它会浮动到浏览器的左侧，基本上使其位于应放置位置的完全相反的一侧。

演示： http ://codepen.io/anon/pen/YPyvzO（删除位置：绝对值，以查看navBar应该在哪里渲染）

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

Answer 1

添加以下内容：

    position: absolute;
    right: 0;

到#navBar 。 我花了很长时间去理解的一件事是这个position: absolute凌驾于一切之上 ，甚至浮于水面。

Answer 2

当您调整浏览器的大小时，宽度和高度会发生变化，因此，您必须在CSS中使用媒体查询，并且在这种情况下，您必须告诉浏览器该导航栏应处于给定的宽度。 另一个选择是您可以使用引导程序，在引导程序中您不会写太多的CSS。 并且所有工作变得容易。