html - 使固定内容滚动

Question

我有一个 div 固定在页面左侧，高度为 100%。我在其中放置了超过左侧 div 高度的内容。现在，我知道我可以添加 overflow:auto 以允许用户滚动该 div 中的内容，但我希望固定 div 中的内容与页面一起滚动。这可能只用css吗？

谢谢

JSFIDDLE：http: //jsfiddle.net/yZmu6/

HTML：

<div id="newsfeed-left">
    <div class="green-square"></div>
    <div class="blue-square"></div>
    <div class="green-square"></div>
    <div class="blue-square"></div>
    <div class="green-square"></div>
    <div class="blue-square"></div>
    <div class="green-square"></div>
    <div class="blue-square"></div>
    <div class="green-square"></div>
</div>

CSS：

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#newsfeed-left {
position: fixed;
float: left;
height: 100%;
width: 200px;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgb(228, 228, 228);
}

.green-square {
margin: 10px 0px 0px 0px;
height: 200px;
width: 200px;
background-color: green;
}

.blue-square {
margin: 10px 0px 0px 0px;
height: 200px;
width: 200px;
background-color: blue;
}

Answer 1

fixeddiv的滚动条与页面的其余部分是分开的。不过这可以用 JS 来完成。

Answer 2

这可能无法回答您的问题，或者是您正在寻找的答案，但是将您的 CSS 更改为使用绝对位置而不是固定位置会使页面正确滚动。

#newsfeed-left {
   position: absolute;
   ...
}