How to reduce vertical height of div holding full screen background image?

[multichild]

I have a home page that has a div which has a full screen background image, but the header where the nav is has pushed it down so a scroll bar appears.

Ideally I think I need to push the div up under the header, but I cant seem to get it working in all browsers.

Have been using:

.home.admin-bar .custom-header {
  height: calc(100vh - 84px) !important;
} 

and

.home.admin-bar .custom-header {
  height: calc(100% - 84px) !important;
} 

Seems logical that the above is correct, but it isnt for some reason.

Here is mysite

[DaveMaxwell]

If I change the height on .has-header-text.home .custom-header-media from

    height: 100vh;

to

    height: calc(100vh - 84px);

the scroll bar goes away

[multichild]

Oh damn, was targeting the wrong class. Just one more thing though, its not working in Firefox for me.

and added: height: -moz-calc(100vh - 84px) !important;

But thank you

[DaveMaxwell]

Odd. What version of FF (and what OS) are you using? I don’t see a scrollbar.on Win10 using FF103

(BTW, you shouldn’t need the !important on that selector)

[multichild]

Ye Firefox up to date, using 104, and using Windows 10. Umm, ok

[multichild]

Thanks Dave, I worked it out, but something doesnt still add up, but its working now.

So I took height: 100% off the body, and then calc worked on the other class.

.has-header-text.home .custom-header-media {
  height: calc(100vh - 84px);
}

.home.admin-bar .custom-header {
  height: calc( 100vh - 116px );
}

[PaulOB]

@multichild

100vh - 116px

I don’t like magic numbers (116px or 84px). What happens if a user zooms the text size only ?

I’m on a mobile at the moment so can’t look at the html but I would have done this with flexbox set to min-height: 100vh with column alignment.

The nav would be the first div and the main picture would be the second div with flex:1 0 0; which would make it stretch to the bottom. No magic numbers needed and the height of the nav is arbitrary and can change with content.

Note that when you say html,body{height:100%} you will get a scroll bar if you don’t remove the default body margins.