Блог

У меня есть следующий код, который отлично работает:

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;
 

Приложение.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;
}
 

Вот как выглядит приложение ПЕРЕД вызовом некоторого составного маршрута:

Вот как выглядит приложение ПОСЛЕ вызова некоторого компонента маршрута:

Как вы можете видеть, после вызова маршрута SomComponent появляется пробел, даже если для приложения и my_app задана высота 100 вч.

Я хочу, чтобы макет был скорректирован, чтобы заполнить пустое пространство, после того, как будет вызван какой-то составной маршрут, как это исправить ?

Вы можете достичь этого с помощью CSS-сетки

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;
}
 

Я исправил проблему, из-за которой приложение не растягивалось для размещения элементов, добавленных:

В приложении.scss:

Я добавил:

 overflow: auto;
 

т.е.:

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

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