如何创建固定宽度的侧边栏和全宽度内容

Question

我想创建一个带有侧边栏和内容的页面。 侧边栏有固定width(200px) ，内容应该是

（body_width - 侧边栏宽度）

。 所以在jQuery中创建并完美运行。

编辑

例

但我想知道，这只能在CSS中做到吗？

Answer 1

你可以使用display: table; 在包含div然后display: table-cell; 在内部的div上。 然后，您可以将最小宽度应用于侧边栏，内容将占用页面的其余部分。

可以在这里找到演示

不要让display: table让你失望 - 这不是使用表格标记或使你的html语义更少。 它只是让你的浏览器将div视为表格单元格（这正是你所需要的）

HTML：

<div id="main_wrap">
    <div id="sidebar">1</div>
    <div id="content">2</div>
</div>​

CSS：

#main_wrap { 
    display: table;
}

#sidebar {
    background:red;
    min-width: 200px;
    display: table-cell;
}

#content {
    background:blue;
    display: table-cell;
    width: 100%;
}

Answer 2

嘿，你可以用纯粹的css得到你想要的margin-left:200px; 到你的#content

CSS

#main_wrap {
border:3px solid green;
}

#sidebar{
        background:red;
        width: 200px;
        float:left;
    }

#content{
    background:blue;
    margin-left:200px;   
}

DEMO

Answer 3

您可以尝试使用负边距。

完整的解释和示例（使用演示）： https ： //shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/

HTML：

<div class="wrapper">

    <div class="content">
    </div><!-- .content -->

    <div class="sidebar">
    </div><!-- .sidebar -->

</div><!-- .wrapper -->

CSS：

.wrapper{
    margin-right: 200px;
}
.content{
    width: 100%;
    float: left;
}
.sidebar{
    float: right;
    width: 200px;
    margin-right: -200px;
}

Answer 4

你可以用css做到这一点，只需删除宽度并从#content浮动。

#content{
    background:blue;
}

检查jsFiddle文件