Fullscreen Not scrolling+scrolling

[bogus]

Hello all and Hello CSS-Tricks forums!

Ugs, what a post title..

Ok, I’m building a blog theme with a fullscreen image background in every post. [This](http://fb.megavillain.org/HTML/index.html “This”) is what i have so far.

Now, when I click the archive button I want the Post+fullscreen image to scroll up (which i’ve done with jquery) to get to the posts overview. The overview thumbnails are displayed using masonry. But I need the overview page to be scrollable in order to see all posts there. I’d like to have the posts lazyloaded later. How can I get the overview page to be scrollable while the post page is not?

Oh and basically I’m a newbie to all the markup stuff and i’m really inexperienced so maybe my code is well, not so good sometimes. I’d be glad for every hint i get to make things better.

Thanks a lot in advance!

[Kitty Giraudel]

The problem comes from the fact thumbnails are absolutely positioned. This means they are out of the flow, and that’s why you can’t scroll down. Because, from the browser point of view, there is nothing to scroll.

[Taufik Nurrohman]

Just set the #container to be overflow:auto:

#container {overflow:auto}

Then, with JQuery, set the container height to be same with the window height:

$(window).on("resize", function() {

$('#container').css('height', $(this).height());

}).trigger("resize");

[bogus]

tried it but can’t get it to work. I have no clue how to fix that..

Maybe there is a way of doing this in CSS only except for the moving of the image?

[JoniGiuro]

I got it to work by setting a fixed height to the container (500px) and overflow-y:scroll;
But HugoGiraudel is right, I wouldn’t absolutely position those images.

[bogus]

but isn’t absolute image positioning demanded by masonry? and how would I have to do it with relative positioning?

[Taufik Nurrohman]

http://jsfiddle.net/tovic/43eG7/22/

[bogus]

oO wow! thank you Hompimpa. That looks fantastic.

[JDS]

On a side note bogus, I would change that font color. You can hardly read it on that background.

[bogus]

yeah it’s still a mockup and far from being final. thanks nonetheless JDS

[Author]

Posts