固定顶栏 + 100% 高度固定侧边栏？答案

【问题标题】：Fixed top bar + 100% height fixed sidebar?固定顶栏 + 100% 高度固定侧边栏？
【发布时间】：2014-04-19 13:26:15
【问题描述】：

我想知道如何使用侧边栏为固定导航栏标记制作正确的布局。我要归档的内容：

固定导航栏
固定右栏（侧边栏）
流体左列（内容）

侧边栏

侧边栏高度始终为窗口高度的 100%，导航栏除外。当侧边栏内容高度大于侧边栏高度时，我需要调整它的内容。在侧边栏滚动的端点（然后侧边栏滚动到底部）我希望主要内容开始滚动，反之亦然。

这是布局：

html,
body {
  width  : 100%;
  height : 100%;
}
body {
  background-color: #f4f4f4;
}
.container {
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.navbar {
  position : fixed;
  height   : 45px;
  width    : 100%;
  z-index  : 9;
}
.main {
  position : absolute;
  top      : 45px;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.main-container {
  overflow : scroll;
  width    : 1200px;
  margin   : 0px auto;
}
.main-container-center {
  width    : 600px;
  height   : 100%;
  float    : left;
  overflow : scroll;
}
.main-container-right {
  position    : fixed;
  width       : 600px; 
  height      : 100%;
  float       : left;
  margin-left : 975px;
  overflow    : scroll;
}

这个标记有两个主要问题：

我不希望内容列有单独的滚动条，应该是原生页面滚动。
即使在滚动后，内容和侧边栏区域中的某些文本也会被剪切（我想这是因为导航栏高度）。

如何更正我的标记以使其按预期工作？谢谢。

【问题讨论】：

如果我理解正确的话，您想要一个在滚动“蓝色”内容时保持原位的粘性侧边栏？

标签： css overflow css-position fixed sidebar

【解决方案1】：

我想这就是你所描述的。您可以像 alwas 一样滚动您的 <body> 内容，并拥有一个最大高度固定侧边栏。

http://jsfiddle.net/MNN28/2/

.container {
  width: 100%;
  height: 100%;
}
.navbar {
  position: fixed;
  height: 45px;
  width: 100%;
  background-color: #262626;
  z-index: 9;
}
.main {
  position: relative;
  top: 45px;
  width: 100%;
  bottom:0;
}
.main-container {
  width: 1200px;
  margin: 0px auto;
  background-color: #e9e9e9;
}
.main-container-center {
  width: 600px;
  top: 45px;
  background-color: #e5e5e5;
}
.main-container-right {
  position: fixed;
  background-color: #d9d9d9;
  width: 600px;
  bottom:0;
  margin-left: 600px;
  overflow: auto;
  top: 45px;
}

【讨论】：

似乎按预期工作！有没有办法让列不按导航栏底线裁剪内容，而是在滚动时从导航栏留出 10px 的边距？无论如何，我会将您的问题标记为已接受，谢谢！
是的，只需使用top: 45px 值即可。 45px = 导航栏高度。 jsfiddle.net/MNN28/3
注意到一个 stange 错误 — 当窗口宽度