Question

基本上容器的宽度为100％（即它将填满整个页面），它将有两列：

第1列是导航栏，应保持固定宽度，例如200像素
第2列是内容区域，应该没有特定宽度 - 它应该只填充剩余区域并根据屏幕/窗口大小进行调整

实现这一目标的最佳方法是什么？

XHTML：

<body>
    <div id="container">
        <div id="navbar">
          &nbsp;
        </div>

        <div id="content">
          &nbsp;
        </div>
    </div>
</body>

CSS：

#container { float: left; width: 100%; }
#navbar { float: left; width: 200px; height: 800px; }
#content { float: left; height: 800px; ??? }

Answer 1

我这样做的方法是在容器和内容div上设置最小宽度，在内容div上有一个左边距，允许它在nav div旁边滑动。左边距加上最小宽度应等于容器的最小宽度。我已经添加了边框，因此您可以看到它的大小正确。

#container
{
    width: 100%;
    min-width: 960px;
}

#nav
{
    float: left;
    width: 200px;
    height: 100%;
    min-height: 800px;
    border: 1px solid #ff0000;
}

#content
{
    margin-left: 205px;
    min-width: 755px;
    height: 100%;
    min-height: 800px;
    border: 1px solid #0000ff;
}

在http://jsfiddle.net/bmMTW/

处小提琴

2列100％布局 - 1个固定列和1个动态列

1 个答案: