CODEWITHSUNDEEP
htmlcssreactjs
johntc121
johntc121

Reputation: 329

How to have one React component take up entire screen (on all devices) until you scroll down?

So lets say I have 3 components: Header, Intro, and MainContent

if I have something like:

<div className='homepage'>
    <div id='top'>
        <Header />
        <Intro />
    </div>
    <div id='bottom'>
        <MainContent />
    </div>
</div>

How would I be able to style this so that the header and the intro take up the entirety of the screen on load, and then you have to scroll to reach the MainContent component?

I could I just set bottom padding of the #top to a percentage but that doesn't work for every device, correct?

Upvotes: 1

Views: 1218

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62773

We can use vh units with Flexbox to easily achieve this. The basic idea is to give the #top a height of 100vh (the full height of the viewport), and then use Flexbox to have the <Intro /> fill the remaining space not taken up by the <Header />. Like this:

#top {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.intro {
  flex-grow: 1;
}

/* Styling CSS - not relevant to solving the issue */

html,
body {
  margin: 0;
  font-family: Arial;
}

.header {
  background-color: black;
  color: white;
}

.intro {
  background-color: lightgray;
}

.header,
.intro,
.main {
  padding: 0.5rem;
}

#bottom {
  min-height: 400px;
}
<div className='homepage'>
    <div id='top'>
        <div class="header">Header</div>
        <div class="intro">Intro</div>
    </div>
    <div id='bottom'>
        <div class="main">Main Content</div>
    </div>
</div>

Upvotes: 1

Related Questions