Best way to do a full viewport height hero header?

HTML & CSS
1

I’m looking to do something like this: http://sailingcollective.com/

I’ve seen some examples that use height: 100vh; and I had an example working local using that, but the problem I ran into was when the browser window was resized down, the content that was within the hero header spilled over into the other sections because the hero header simply fills the height of the viewport but the content is too much. Ends in this: http://imgur.com/a/DGtpW

The site I linked to above seems to use a display: table; solution which I haven’t tried yet. I’ve also seen some jquery solutions but I’d like to try to stay away from jquery if possible.

What’s the best approach?

2

Hi,

I use display:table with height:100% for the first container (or height:100vh for modern browsers which won’t need html,body set to 100% unlike the percentage method). This will give you the initial height but still allow content to stretch the container if it doesn’t fit.

I have an old example here.

This page also uses a similar technique.

2 Likes
3

Thanks, Paul. I appreciate that. So, is it safe to assume that you’re more fond of using the display: table method than the 100vh method? For one because of the reasons outlined how it doesn’t allow for it to stretch to fit the content within.

I got the display:table method working just fine and seems like it will work for my needs. The one thing that came up is on the right hand side of my browser now (Chrome) I have this empty space to the right of the sidebar: http://imgur.com/a/qCiAm

It happens when you add 100% height to body, html but it doesn’t seem to happen in your examples so I’m not sure what I need to do to get rid of that?

4

It does in you say min-height: 100vh.
Though one thing I fell foul of doing that, if you use flex-box within the 100vh container, IE11 doesn’t like it because there is not a height set.
And obviously older browser won’t work with it.

5

You can still use 100vh on the table because a table always treat height as a minimum. I prefer the 100% height though because it works back to ie8 without problem so there is no need to change. You just need to ensure an unbroken chain of parents with height 100% set (effectively html and body elements).

I can’t debug an image but it looks like you probably forgot to remove margin/padding from html and body otherwise the 100% is 100% + padding/margin.

Actually your scroll looks a lot deeper so you must have something else going on. I’d need to see the code to debug.

6

Ah… so it does. Well now I feel pretty dumb. Thanks.

7

Thanks. Makes sense.

I uploaded a quick and dirty template with the styles I’m using. you can see the extra space on the right side. I had the margins set to zero at the top of my styles so I’m not sure that it’s it. Definitely only happens when I add height: 100% to body,html though.

Edit: here’s the template: http://www.deronsizemore.com/test.html

8

Remove the overflow-x hidden on the body otherwise the height of the body is fixed at 100% and thus gets an extra scrollbar. The space at the side would be for the html scrollbar.

Effectively we want the body to spill out of the bottom into the html element which it will do automatically iff you don;t hide the overflow:)

2 Likes
9

Ah! thank you. I forget why I even had that in there, but it seems unnecessary now.

Thanks again I appreciate all your help I think you’ve been fixing my css bugs for over a decade now! :wink:

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.