CODEWITHSUNDEEP
cssreactjs
nCardot
nCardot

Reputation: 6595

White space from html below 100vh cover background image, causing scrollbar

In my React project, I have a component for a landing page. A section element with a class of "landing" is the top-level element for the component. I would like the background image to take the full width of the screen, which it does -- however, there is white space below the cover image and a scrollbar appears.

Setting html { overflow-y: hidden } eliminates the issue, but I can't do that because it chops off the content for other components that do require a scrollbar. (React Router is used to display the component -- if only there were some way I can do that when the landing component route is being displayed only...)

When I open Chrome dev tools and hover over the white space, two things are highlighted: first (up higher) div#root, and below, html.

enter image description here

enter image description here

CSS for section element:

.landing {
  /* center center is background-position, cover is background-size (see https://stackoverflow.com/questions/31558245/declaring-all-css-background-properties-in-one-line-especially-background-size) */
  /* bacground-position: 2-value syntax: one value defines X and the other defines Y. Default value is top left or 0% 0% */
  background: url('./img/showcase.jpg') no-repeat center center / cover;
  height: 100vh;
}

GitHub repo here. Landing page component code here. Full CSS here.

Upvotes: 3

Views: 4053

Answers (1)

Michael Rodriguez
Michael Rodriguez

Reputation: 2176

Edit: I built your React site from your source. The issue is that you have <section class="container"></section> under your landing section. .container has these styles applied:

.container {
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    padding: 0 2rem;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

hence, it is occupying some height and causing the overflow. If you don't need that section, remove it and your problem is solved. If you do need it, then you'll need to work with my answer below to calculate the proper height for .landing.

enter image description here

With display: none; added to .container: enter image description here

100vh will have a height equivalent to 100% of the viewport, not the remaining viewport but the whole viewport. But since you have a header, you end up with a total height that is header + viewport, causing the scrollbar.

You could do something like height: calc(100vh - <height_of_header>); where is replaced with the actual height of your header from your CSS.

* {
  margin: 0;
  padding: 0;
}

header {
  background: #777;
  height: 50px;
}

.landing {
  background: #999;
  height: calc(100vh - 50px);
}
<header>
  <h1>Header</h1>
</header>

<section class="landing">
  <p>This is the landing section</p>
</section>

It's also worth noting that in the event that the content of .landing exceeds the viewport, the background won't expand with it if you just use height. In that case, you'd want to use min-height instead.

Upvotes: 2

Related Questions