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

如果内容div可能比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;}