React JS - 应用程序没有填满整个页面答案

【问题标题】：React JS - app not filling the entire pageReact JS - 应用程序没有填满整个页面
【发布时间】：2021-09-12 15:52:38
【问题描述】：

我正在使用 React JS。我有 3 个组件：

导航
div
部分

文件夹：

（文件夹：Navbar.js、Navbar.scss）
（文件夹：MyDivSection.js、MyDivSection.scss）
（文件夹：MySection.js、MySection.scss）
App.js（上述所有组件都被调用的地方）
index.js (ReactDOM.render(, document.getElementById('root')); )

这是我的页面布局：

页面底部有一个白色/空白区域，我想使用 sass/css 摆脱它？

如何实现？

注意：白色/空白区域仅在 768px、480px 和 1200px 分辨率下出现

【问题讨论】：

你想要背景吗？你想扩大nav、div 和/或“部分”吗？你的预期输出是什么？你必须更具体

标签： javascript html css reactjs sass

【解决方案1】：

尝试阅读有关 flexbox 的一般信息，但 here're few handy examples of layouts 可能会对您有所帮助

【讨论】：

【解决方案2】：

如果我理解了这个问题，那么您将拥有 menu=nav 、 Content=div 和 section=footer。

然后菜单的高度应该固定在内容和页脚可以在 % 的位置。这就是你遇到的问题。

您需要增加内容，使其填充白色部分

我会这样做。

.app{
display:inline-block;
width: 98vw;
height:95vh;
}

.app> div{
  width:100%;

}

.app .nav{
background:red;
height:30px;
}

.app .content{
background:blue;
height:75%;
}

.app .footer{
background:green;
height:20%;
}

<div class="app">
<div class="nav">nav</div>
<div class="content">div</div>
<div class="footer">section</div>
</div>

【讨论】：