html - 像网格一样的CSS定位

Question

所以我陷入了这个看似简单的问题:

我希望我的页面由两部分组成。首先是左侧的导航栏，始终为 300 像素。接下来是页面的内容，它应该填满左边的剩余空间。

这两个元素都有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