0

I am rendering component A (a full screen overlay) inside of component B (a header). I am specifying component A to be height: 100vh, and it is indeed the height of my screen, only it is pushed down by the size of my header.

I would like for it both be the height of and cover the entirety of the screen, but without specifying margin-top: -$(size of my header).

How might I do this?

Michael
  • 13
  • 5

1 Answers1

2

By using the property position with value fixed.

As mentioned in the comments, you can use the position property as follows:

<div class="componentA">test</div>

.componentA {
    position: fixed; // we make it position relative to the viewport.
    top:0; // top edge of content box to top position 0
    right:0; // right edge of content box to right position 0
    bottom:0; // bottom edge of content box to bottom position 0
    left:0; // left edge of content box to left position 0
}

As you can see, we have now ruled that the content box edges of the div with class componentA to be positioned at the zero points (top, right, bottom, left) of the viewport. If that makes sense.

about position:fixed; ( from w3school )

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

viewport ( from this answer )

The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page.

To be more specific, the viewport has nothing to do with screen resolution or the size of your browser window; it only refers to the space in which the webpage is visible to the user at any given time.

Ole Aldric
  • 725
  • 6
  • 22
  • Thanks! Setting `position` to fixed, `top` to 0, and `width` to 100% worked! Only now I can no longer access the button component I used to mount the overlay in the first place... Fiddled around with z-index but that yielded nothing. Would you happen to have any idea how I might raise an individual component so it is "above" even this positioned fixed overlay (i.e. on top of component A). – Michael Sep 19 '19 at 00:46
  • Set component b to z-index: 0, then componentA to 1 and lastly set the button component to z-index 3. If my answer helped you, be kind and set it as "answered" :) – Ole Aldric Sep 19 '19 at 01:25
  • @ZeyadShaban The answer has nothing to do with React, so I don't understand why you complain. – Ole Aldric Nov 21 '20 at 14:12