html - 像网格一样定位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;}