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

Question

我想创建一个带有侧边栏和内容的页面。侧边栏已修复width(200px)，内容应为

(body_width - 侧边栏宽度)

。因此在 jQuery 中创建并完美运行。

编辑

Example

但我想知道，这可能只在 CSS 中实现吗？

Answer 1

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

可以在here找到demo

不要让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 File