Absolute div with 100% height does not continue after scroll

[Anonymous]

Hi!
I am building a website for a friend of a friend, and I’ve got this design to work after (which, according to me is semi-ugly, but that is up to her).

I have a problem with an absolute div no expanding past the windows height.
It can’t be solved with an img tag because it needs to repeat in the y axis.
Could someone help me with this?
The site can be found here.
I am talking about the ribbons on the side. If you resize and refresh your browser, you will see that these ribbons stop at the bottom of the window.

Maybe a solution would be to make them fixed, but if it can be solved in another way, it would be really nice.

Best regards,
Wilhelm

[Mikko Laine]

html and body height 100%, container that has min-height 100 and position relative.

then just absolute position right/left and top: 0; bottom: 0; dont use height.

does that help?

or flexbox.. a lot easier.

[Anonymous]

Sorry, didn’t help. Already applied those rules. I’ll try a few methods, rearrange the code a bit (with a codepen example) and come back if it doesn’t work.

[Alen]

It’s because you’re setting the height with JavaScript.

If you resize the browser to mobile width first then hit refresh, and then scroll you’ll see it works.

You might want to bind the functionality of calculating height to the resize event.

[Anonymous]

Thanks Alen, altough the Javascript was added afterwards as I did not find a suitable CSS solution.
I will definitly bind it to resize, thanks :)

[Author]

Posts