Html css定位像一个网格

所以我被困在这个看似简单的问题上：

我希望我的页面由两部分组成。首先是左侧的导航条，始终为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中是可行的

有什么想法吗

---

您只需对导航栏使用

float:left

。不需要

位置：相对

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


如果content div可能比
导航栏长，并且您不希望它在导航栏下方流动，则可以添加
左边距

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

给你：

我想你可能也喜欢100%高的菜单

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

谢谢！！这非常有效。如果允许的话，我会接受答案