如何在 CSS 中实现固定的左侧边栏和流畅的右侧内容答案

【问题标题】：How do you implement a fixed left sidebar and fluid right content in CSS如何在 CSS 中实现固定的左侧边栏和流畅的右侧内容
【发布时间】：2016-05-11 22:25:06
【问题描述】：

我很头疼如何让我的流体内容向右浮动。

左侧边栏是固定大小的。
正确的内容是流体大小。

这里和example 我的html 和css

如何让我的id="content" 浮在右边？

【问题讨论】：

CSS Layout 2-Column fixed-fluid的可能重复

标签： html css xhtml

【解决方案1】：

设置边距并移除 #content 上的浮动/宽度，如下所示：

HTML：

<div id="wrapper">
  <div id="sidebar">Sidebar</div>
  <div id="content">Content</div>
</div>

CSS：

#wrapper {
    width:400px;
    overflow:hidden;
    padding:10px;
}
#sidebar {
    float:left;
    width:100px;
}
#content {
    margin: 0 0 0 100px;
}
div {
    border:1px solid #333;
}

http://jsfiddle.net/HWMJc/1/

【讨论】：

太棒了。所以宽度 100% 不重要？
在这种情况下您不需要它，因为您正在设置左边距。

【解决方案2】：

我不久前发现了一个更简单的解决方案。可以很好地回到 IE7。 #fluid div 将在固定修复旁边向上滑动并占用剩余空间，同时为所有响应式站点保持良好的流动性。根本不需要在流体 div 上放置浮点数或宽度。

http://jsfiddle.net/HWMJc/874/

#sidebar {
  float:left;
  width:100px;
}
#content {
  overflow:hidden;
}

【讨论】：

这实际上是更好的解决方案。两年前做前端的时候不知道这个。

【解决方案3】：

您应该将其设置为：

sidebar{ width:100px; float: left}

【讨论】：

【解决方案4】：

不要在#content 上使用 100% 的宽度。
70% 有效，但两个元素之间有一个小的差距。不过，您可以对其进行调整以使其更合身。

【讨论】：

如果我们有不同的显示器尺寸呢？
它应该仍然可以正确调整。