Question

我想知道如何使用sidebard为固定的导航栏标记做出正确的布局。我试图改变的是：

固定导航栏
固定右栏（侧栏）
流体离开coumn（内容）

边栏

除导航栏外，侧边栏高度始终为宽度高度的100％。当侧边栏内容高度超过侧边栏高度时，我需要抓住它的内容。在侧边栏滚动的端点（然后侧边栏滚动到它的底部）我希望主要内容开始滚动，反之亦然。

这里＆＃39;是布局：

enter image description here

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;
}

此标记中存在两个主要问题：

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

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

Answer 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;
}

固定顶杆+ 100％高度固定侧边栏？

1 个答案: