如何让一个 React 组件占据整个屏幕（在所有设备上）直到您向下滚动？

Question

所以假设我有 3 个组件：Header、Intro 和 MainContent

如果我有类似的东西：

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

我如何设置样式才能使 header 和简介在加载时占据整个屏幕，然后您必须滚动才能到达 MainContent 组件？

我可以将#top 的底部填充设置为百分比，但这并不适用于所有设备，对吗？

Answer 1

我们可以使用 vh 单元和 Flexbox 来轻松实现这一点。基本思路是给 #top 一个 100vh 的高度（视口的全高），然后使用 Flexbox 让 <Intro /> 填充剩余的 space 不被 <Header /> 占用。像这样：

#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>

如何让一个 React 组件占据整个屏幕（在所有设备上）直到您向下滚动？

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

html

css

reactjs