Oscar Lundberg Oscar Lundberg - 2 months ago 8
CSS Question

CSS 100% height not scaling as intended

This question seems to have been asked a thousand times, and I've read through most of them and still no luck.

Here's the site i'm trying to work on http://exilion.eu

I want the top photo and the menu bar to scale to the browser.
I thought i managed to fix this, but for some weird reason the next element popped up inbetween, as you can see.

I'm styling a wordpress theme so that's why I'm not 100% sure of what I'm doing...

The elements are contained in
' #masthead '

and it has a min-height of 100%.
As does all of its parents.

Thanks for any help!

Answer

You could try:

#masthead {
min-height: 100vh;
}

EDIT: I think you may need to remove overflow:hidden from body, html to show the scrollbar.

Comments