Question

这可能是一个常见问题，但我在网络上发现的所有答案都无法正常运作。

我想为我的网页创建一个侧边栏，它填满了网页的整个高度。然后当您滚动侧边栏时，内容应该沿着其他网站内容移动。

我试过这个方法：

HTML：

<div id="wrapper">
   <div id="sidebar"></div>
   <div id="content-area"></div>
</div>

CSS：

body {
   margin: 0;
}

#wrapper {
   width: 100%;
}

#sidebar {
   width: 280px;
   position: absolute;
   top: 0;
   bottom: 0;
}

#content-area {
   width: 900px;
   margin-left: 280px;
}

..和

HTML：

<div id="wrapper">
   <div id="sidebar"></div>
   <div id="content-area"></div>
</div>

CSS：

body {
   height: auto;
   min-height: 100%;
   margin: 0;
}

#wrapper {
   width: 100%;
   height: 100%;
}

#sidebar {
   width: 280px;
   height: 100%;
   float: left;
}

#content-area {
   width: 900px;
   height: 100%;
   float: left;
}

第一个工作正常，直到内容扩展：http://jsfiddle.net/B3bCb/1/ 如果发生这种情况，则侧栏会根据浏览器窗口高度停止。

第二个根本没用：http://jsfiddle.net/B3bCb/2/

我也尝试过faux column方法，但我需要在侧边栏上有一个CSS-shadow （可以在网站上动态更改模糊，传播和颜色），我在人造柱方法中无法正常做法（人造专栏只是一个图像）。

那么，无论我有多少内容，如何让我的侧边栏高度达到100％？

Answer 1

将侧边栏位置设为“固定”它保持不变，无论您拥有多少内容。我不知道我是否解决了你的问题，但希望它有所帮助;）

以下是代码：

#sidebar {
    width: 280px;
    position: fixed;
    top: 0;
    bottom: 0;
    background: blue; }

这是fiddle

Answer 2

以下css可以是此

的另一种选择

#sidebar {
    width: 280px;
    position: fixed;
    top: 0;
    height:100%;
    background: blue;
}


#content-area {
    position:relative;
    left: 280px; // width of your side box.
}

Answer 3

您有几个选择，但要点是使用CSS position。

position: absolute;不起作用的原因是因为它需要进行一些调整才能发挥作用。您需要在html，body和包装类上禁用滚动，并在内容区域上启用滚动。

html, body, wrapper {
  overflow: hidden;
}

.content-area {
  overflow: auto;
}

您可以看到an example of this here。这是我制作的响应性侧边栏布局。

另一种选择是在侧边栏上使用position: fixed;，正如其他人所说的那样。

Answer 4

检查这个小提琴http://jsfiddle.net/dJ654/2/

我改变了一些风格

#sidebar {
   width: 10%;
   height: 100%;
   position:fixed;
   right:0px;
   top:0px;
   background-color:gray;

}

#content-area {
  width: 90%;
  height: 100%;
  float: left;
  background-color:green;

}

边栏填充整个页面的高度

4 个答案: