css height:auto 不起作用,CSS Auto-height Div无法正确定位

我正在尝试获得一个简单的页面布局，其中导航栏垂直位于用户窗口的右侧，占用的空间不超过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的位置设置为绝对位置(位置：绝对值)，则导航栏会准确呈现它应该呈现的方式，除非它浮动到浏览器的左侧，基本上将它放在应该位于的完全相反的一侧。 / LI>

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