Question

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

（body_width - 侧边栏宽度）

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

修改

Example

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

Answer 1

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

可以找到演示here

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

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

4 个答案: