具有固定宽度和流动内容的 CSS 侧边栏答案

【问题标题】：CSS sidebar with fixed width and fluid content具有固定宽度和流动内容的 CSS 侧边栏
【发布时间】：2015-05-05 09:48:41
【问题描述】：

我正在尝试添加一个固定宽度的侧边栏。但内容 div 应该是流动的。

这是我的代码：

.page-main{
    padding: 10px;
    height: auto;
    overflow: hidden;
}

.page-content{
    background-color: red;
    width: auto;
    overflow: hidden;
}

.page-side {
    float: right;
    width: 200px;
    background-color: green;
}

<div class="page-main">
                <div class="page-content">
                    Content

                </div>
                <div class="page-side">
                    Sidebar
                </div>
            </div>

希望有人能帮忙。

【问题讨论】：

那么您的实际问题是什么？

标签： html css width fixed fluid

【解决方案1】：

只需在您的 html 中将 .page-side 移动到 .page-content 之前

.page-main{
    padding: 10px;
    height: auto;
    overflow: hidden;
}

.page-content{
    background-color: red;
    width: auto;
    overflow: hidden;
}

.page-side {
    float: right;
    width: 200px;
    background-color: green;
}

<div class="page-main">
  <div class="page-side">
    Sidebar
  </div>
  <div class="page-content">
    Content
  </div>                
</div>

【讨论】：

@R3Tech 将浮动元素保持在顶部的良好做法：alistapart.com/article/css-floats-101#section2
我尽可能将内容放在 HTML 中。侧边栏的东西通常不是那么重要，所以把它放在最后往往会使响应式布局更容易。恕我直言...

【解决方案2】：

1.你可以使用css表达式

.page-content {width: calc(100% - 200px);float:left}

2.或者您可以将侧边栏设置为绝对，并为页面内容添加边距

.page-side {
    width: 200px;
    background-color: green;
    position: absolute;
    right: 20px;
    top: 18px;
}
.page-content {
    background-color: red;
    width: auto;
    overflow: hidden;
    margin-right: 200px;
}

【讨论】：

【解决方案3】：

您可以使用负边距。

HTML：

<div class="wrapper">

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

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

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

CSS：

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

2-3列布局的完整解释和示例：

https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/

【讨论】：

【解决方案4】：

不确定是否要将侧边栏宽度精确到 200 像素，您也可以按百分比指定宽度...我希望这会有所帮助

<div class="page-main">

            <div class="page-content">
                Content

            </div>

            <div class="page-side">
                Sidebar
            </div>
        </div>

.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
float:left;
width: 61%;
}

.page-side {
float: right;
width: 200px;
background-color: green;
}

或者看看这个：https://jsfiddle.net/pjx6wqrw/3/

{已编辑以从代码块中删除 jsfiddle 链接}

【讨论】：

如果你的页面内容永远不会比跑步者短