像一个网格CSS定位

Question

所以我坚持这个看似简单的问题：

我想由两个部分的我的网页。首先是左侧的导航栏，即总是300px。接下来是页面的内容，它应该填充左侧的剩余空间。

这些元素都具有position:relative

让我的代码解释：

#navBar{ 
    position:relative; 
    background-color:#666; 
    width:300px; 
} 
#content{ 
    position:relative; 
    background-color:#999; 
    /* what can I put here to make it so, no matter 
    ** what (even on resize), the div this represents 
    ** will always go from the end of #navBar to the 
    ** end of the entire window? 
    */ 
} 

我知道我可能要在这里的某个地方使用float:left，但我仍然需要得到宽度权之前，我可以用float

如果我想使用jquery，我可以这样做：

var ww = $(window).width(); 
$("#content").width(ww-300); 
$(window).resize(function(){ 
    ww = $(window).width(); 
    $("#content").width(ww-300); 
}); 

但我希望这是可行的在css ...

任何想法？

jsfiddle

Answer 1

您可以只使用float: left为navbar。无需position: relative

#navBar{ 
    float: left; 
    background-color:#666; 
    width:300px; 
} 

JSFiddle

如果内容格可能比navbar长，你不希望它流导航栏下面，你可以添加一个margin-left

#content{ 
    background-color:#999; 
    margin-left: 310px; 
    height: 400px; 
} 

JSFiddle

Answer 2

这里你去： http://jsfiddle.net/GvC4k/1/

我想你可能也喜欢菜单100％的高度。

body,html{height:100%; font-family:Arial;} 
.menu{float:left; width:300px; background:#dadada; height:100%;} 
.content{background:#888888;}