CSS自动高度Div自身位置不正确

我试图得到一个简单的页面布局，导航栏垂直放置在用户窗口的右侧，占用的可用空间不超过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%。请注意，当浏览器窗口的宽度更改时，它仍会调整大小。 如果我将navBar的位置设置为absolute position:absolute，则navBar的渲染方式与它应该渲染的方式完全相同，只是它浮动到浏览器的左侧，基本上使它位于它应该位于的完全相反的一侧。 演示：remove position:absolute以查看导航栏应渲染的位置

我尝试了几种不同的方法，包括将CSS中的HTML设置为高度：100%和navbar的几个不同位置属性，但都没有效果。我希望这只能在CSS中完成，但我不确定这是否可行。

添加以下内容：

    position: absolute;
    right: 0;

---

到导航栏。我花了很长时间才理解的一件事是：绝对覆盖一切，甚至浮动。

当你调整浏览器的大小时，宽度和高度会发生变化，因此为此，你必须在CSS中使用媒体查询，并且在这一点上，你必须告诉浏览器，在这个宽度中，导航栏应该在给定的宽度内。另一个选择是，您可以使用bootstrap，在bootstrap中您不会编写太多css。所有的工作都变得容易了

添加位置时会发生什么：绝对；右：0；“到导航栏去吗？”先生，它修好了。我认为这样的属性在使用float时不起作用。显然，我也不需要浮动div。非常感谢。不客气。我加上它作为答案。