Question

我有一个使用Bootstrap 3的项目，我需要在带有内容的部分上放置一个侧边栏，但是要尊重.container包装器的宽度。侧边栏必须填满整页高度并可滚动。

这个JSFiddle（评论中的链接，因为我还不能发布超过2个链接）显示了我的结构及其样式。您可以通过在JSFiddle上使用HTML框架的高度来查看问题，使其小于页面高度。

为了更好地说明，这些图像显示侧边栏为蓝色，填满所有页面高度，在所有情况下：

Case 1：这些部分比视口高;侧边栏跟随身高
Case 2：这些部分不会填满所有页面，但侧边栏会填充

注意：侧栏遵循.container的宽度非常重要。下面的内容没有，它是全宽和部分可见。

奖励：在案例2中，该部分也应该是全高

我试图提供更多详细信息，但我可以提供任何其他信息。

我知道可以通过脚本，但我更喜欢使用CSS

Answer 1

很难提供更多细节。但我继续使用你的标记制作了这个具有100％高度彩色背景的小提琴：https://jsfiddle.net/stevenng/8xdfosf6/

.container {
  width: 100%;
}
.sidebar {
  background: #bada55;
  float: left;
  width: 25%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.sections {
  background-color: #b000b5;
  width: 75%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

希望这有帮助！

包装内容的全高侧边栏

1 个答案: