即使高度设置为 100vh，调用 Route 后仍会出现空白答案

【问题标题】：White space appears after calling a Route even though height is set to 100vh即使高度设置为 100vh，调用 Route 后仍会出现空白
【发布时间】：2021-11-15 19:33:57
【问题描述】：

我有以下代码，运行良好：

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App(){

    return (
        <Router>
            <div className="app">
                <SideBar/>
                <div className="my_app">
                    <NavBar/>

                    <Switch>
                        <Route path="/some/component" render={() => <SomeComponent/>}/>
                    </Switch>
                </div>

            </div>
        </Router>
                
    );
}

export default App;

App.scss：

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.app{
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: rgb(247, 249, 252);
  display: flex;
}

.my_app{
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: rgb(247, 249, 252);
  display: flex;
  flex-flow: column;
}

以下是应用在调用 SomeComponent Route之前的外观：

这是应用调用 SomeComponent 路由之后的样子：

如您所见，在调用 SomComponent 路由后会出现空白，即使 app 和 my_app 都设置为 100vh 高度。

我想重新调整布局以填充空白，在调用 SomeComponent 路由后，如何解决？

【问题讨论】：

标签： javascript css reactjs sass react-router

【解决方案1】：

您可以通过使用 CSS Grid 来实现这一点

HTML：

<div class="app-layout">
   <div class="navbar"></div>
   <div class="sidebar"></div>
   <div class="route-view"></div>
</div>

样式：

* {
    padding: 0;
    margin: 0;
}
.app-layout {
    width: 100vw;
    height: 100vh;
    overflow: hidden;


    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 50px  1fr;
    grid-template-areas: "navbar navbar"
                         "sidebar route-view";
}


.navbar {
    grid-area: navbar;
}
.sidebar {
    grid-area: sidebar;
}
.route-view {
    grid-area: route-view;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

【讨论】：

【解决方案2】：

我修复了应用程序无法拉伸以适应以下人员添加的项目的问题：

在 App.scss 中：

我补充说：

overflow: auto;

即：

.app{
  width: 100%;
  height: 100vh;
  .....
  overflow: auto;
}

.my_app{
  width: 100%;
  height: 100vh;
  .....
  overflow: auto;
}

【讨论】：