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

我想要获得一个简单的页面布局，其中导航栏垂直沿用户窗口的右侧坐，占用不超过20％的可用空间。剩余的80％左侧的空间用于内容。CSS自动高度div不能正确定位本身

我希望整个页面可以调整大小，所以无论浏览器窗口有多大或多小（合理），内容都会调整到用户的屏幕。一切正常，并调整大小，但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%; 
}

问题：

如果我离开上面是代码，导航栏呈现在屏幕的右侧，因为它应该，但它是不是浏览器窗口的高度的100％。请注意，当浏览器窗口的WIDTH改变时，它仍会调整大小。
如果我将navBar的位置设置为绝对位置（位置：绝对），则导航栏完全呈现它应呈现的方式，除非它浮动到浏览器的左侧，基本上使其位于应该出现的位置的完全相反侧。

演示：http://codepen.io/anon/pen/YPyvzO（删除的位置是：绝对的，看看那里的导航栏应呈现）

我已经尝试了几种不同的东西，包括CSS设置“HTML”身高：100％和几个不同的位置导航栏的属性，都无济于事。我只想用CSS做这件事，但我不确定它是否可行。

来源

2014-12-03 Alcolawl

当你添加'position：absolute;正确：0;''到＃navBar'？ – 2014-12-03 04:22:57

@MisterDood它修复了它。我不认为这样的财产在使用浮动时会起作用。显然我不需要浮动div。谢谢！ – Alcolawl 2014-12-03 04:27:48

不客气。我将其添加为答案。 – 2014-12-03 04:30:59

添加以下内容：

position: absolute; 
    right: 0;

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

来源

2014-12-03 04:30:36

当您调整浏览器的宽度和高度更改时，为此目的，您必须在CSS中使用媒体查询，并且必须告知浏览器在此宽度中导航栏应该处于给定宽度。另一个选择是你可以使用bootstrap，在bootstrap中你不会写太多的css。所有的工作变得简单。

来源

2014-12-03 04:37:42

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

回答

相关问题