CODEWITHSUNDEEP
htmlcss
user2096890
user2096890

Reputation: 159

Make fixed content scroll

I have a div that is fixed to the left of the page with a height of 100%. I placed content inside of it that exceeds the height of the left div. Now, I know I can add overflow:auto to allow users to scroll through the content in that div, but I want the content within the fixed div, to scroll with the page. Is this possible with just css?

Thanks

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

Upvotes: 0

Views: 671

Answers (2)

Revent
Revent

Reputation: 2109

This may not answer your question, or be the answer you're looking for, but changing your CSS to use absolute position instead of fixed makes the page scroll correctly.

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

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

The fixed div's scrollbar is separate from the rest of the page. This could be done with JS though.

Upvotes: 1

Related Questions