Css 2列100%布局-1个固定列和1个动态列_Css_Xhtml

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

css

Css 2列100%布局-1个固定列和1个动态列,css,xhtml,Css,Xhtml,基本上，容器的宽度为100%（即，它将填充整个页面），并有两列：第1列是导航条，应保持固定宽度，例如200px 第2列是内容区域，应该没有特定的宽度-它应该只填充剩余区域，并根据屏幕/窗口大小进行调整实现这一目标的最佳方式是什么 XHTML： <body> <div id="container"> <div id="navbar">   </div>

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

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

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

XHTML：

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

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

我的方法是在容器和内容div上设置一个最小宽度，内容div上有一个左边距，允许它在导航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;
}

拨弄

参见

#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;
}