>source

다음 code는 완벽하게 작동합니다.

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

다음은 SomeComponent Route를 호출 하는 앱의 모습입니다.

다음은 SomeComponent Route를 호출한 앱의 모습입니다.

보다시피 앱과 my_app이 모두 100vh 높이로 설정되어 있어도 SomComponent 경로가 호출된 후 공백이 나타납니다.

SomeComponent 경로가 호출된 후 공백을 채우도록 레이아웃을 다시 조정하고 싶습니다. 어떻게 수정하나요?

  • 답변 # 1

    다음에 의해 추가된 항목을 수용할 수 있도록 앱이 늘어나지 않는 문제를 수정했습니다.

    App.scss에서:

    추가했습니다:

    overflow: auto;
    

    즉:

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

  • 답변 # 2

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

  • 이전 PyGame : 해결 방법을 알 수 없음
  • 다음 Python 3에서 등호 연산자와 함께 비트 AND 및 논리 AND의 동작