固定内容滚动

时间:2013-04-02 23:11:22

标签: html css

我有一个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;
}

2 个答案:

答案 0 :(得分:1)

固定div的滚动条与页面的其余部分分开。这可以通过JS完成。

答案 1 :(得分:0)

这可能无法解答您的问题,或者是您正在寻找的答案,但更改CSS以使用绝对位置而非固定使页面正确滚动。

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