Hi there! I’m working on newsite2017.ictlongbeach.org and my hero header (on the home page) 100% height (no scroll). I have the bar 2 vh set to 100, but the page still scrolls to reveal awkward white space at the bottom. Can you help me resolve this?
Thanks!
Howdy, @kennyallen!
Thanks for writing in! The white space you are seeing at the bottom of the page is due to the 6em of margin you have applied to the top of your container in your second bar. It would seem you’re using this to offset this container by the height of the first bar to keep things visually centered on the vertical axis. Instead of using margin for this, set the Top Padding value of that container to calc(12.5vw + 6em), and leave the sides and bottom at 12.5vw. The calc() function allows you to combine units that would not otherwise “mix” in CSS, and moving this spacing to the padding of the container will help ensure that this whitespace below the header does not appear.
Hopefully that helps to point you in the right direction. Cheers!
@kory - thank you SO much! I don’t know why I wasn’t able to figure that out in inspector - but that’s exactly what the issue was and you helped provide a clear solution. Thank you!!!
No problem at all, @kennyallen! It was kind of a tricky one as the problem wasn’t immediately apparent by just inspecting the white area, kinda had to go digging a little bit. 
Glad all is in order now!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.