Question

我试图创建一个侧边栏（有时比内容部分长）。
我在这里演示：http://jsfiddle.net/y9hp4evy/1/
第二种情况：http://jsfiddle.net/y9hp4evy/2/（如果我向侧边栏添加高度）

但是当侧边栏内容较长时，它会超过页脚。有些内容低于侧栏部分的末尾。

我在这里缺少什么？无法在搜索结果中找到正确的解决方案。任何帮助将不胜感激。

Answer 1

在这种情况下，请确保您的侧边栏包含在主内容包装器中。即：

<div id="container">
  <div id="article"></div>
  <div id="sidebar"></div>
</div>

<footer></footer>

然后确保您的CSS具有主要容器的清除修复程序＆＃39;。即：

#container:after{
  content: "",
  display: block;
  clear: both;
}

这是你的第二个JSfiddle编辑：http://jsfiddle.net/y9hp4evy/3/ 请注意，我删除了侧边栏的height属性。除非您准备好处理溢出情况，否则切勿强制执行高度。使用min-height

要好得多

Answer 2

这是第一个修复的：

.right-pane {
    float: right;
    width: 300px;
}
.left-pane {
    float:left;
    position: relative;
    width: 300px;
}

这是第二个：

（我删除了侧边栏的高度）

更新

所以使用col-sm-4并在其中添加具有固定宽度的侧边栏。