3

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.

nCardot
  • 5,992
  • 6
  • 47
  • 83

1 Answers1

2

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.

Michael Rodriguez
  • 2,142
  • 1
  • 9
  • 15
  • There is no header element. Full CSS here: https://github.com/nataliecardot/devconnect/blob/master/client/src/App.css I also linked the landing page component. The navbar with position: fixed isn't causing the issue. – nCardot Dec 30 '19 at 20:28
  • I used a
    tag to illustrate the demo, but in your case you have something occupying a height which is why using 100vh on your .layout results in a page that is too tall. Your component link limits us to seeing only the elements of that component, i didn't go in and check your whole layout.
     – Michael Rodriguez Dec 30 '19 at 20:34
  • @Natalie Is this site live anywhere? – Michael Rodriguez Dec 30 '19 at 20:37
  • Thanks for trying to help. The navbar is the only thing above the background image set for the .landing section but it doesn't have a height, so I can't subtract it -- but I don't think that is causing the issue. No, it isn't deployed yet. – nCardot Dec 30 '19 at 20:40
  • 1
    You added a comment about _Landing.js_ not having a `.container` class, but your `section` element is above your `Switch` component and is always rendered. The `margin` values in that rule set are causing the scroll bar to appear. I think... – hotpink Dec 30 '19 at 20:47
  • @Natalie I built your site from source. Check out my updated answer. – Michael Rodriguez Dec 30 '19 at 20:52
  • Thank you! If I comment out the margin-bottom and margin-top values for container there is no scrollbar. I still don't know how to fix it (height: 100vh - 9rem, the total margin top and bottom, doesn't work), but at least I know where the space is coming from. – nCardot Dec 30 '19 at 21:02
  • 1
    @Natalie I just tried as well. Oddly, even though the spec says it should work with rem and em, Chrome doesn't seem to acknowledge it. It does work if I use a pixel value. – Michael Rodriguez Dec 30 '19 at 21:11
  • For .landing I tried height: calc(100vh - 144px) since 1rem is 16px and that only caused the showcase/background image to decrease in height (no longer full screen). – nCardot Dec 30 '19 at 21:31