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

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

演示

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 文件