0
207
VisualizaçõesAparece un espacio en blanco después de llamar a una ruta aunque la altura esté configurada en 100vh
Tengo el siguiente código, que funciona perfectamente bien:
Aplicación.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;Aplicación.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; } Así es como se ve la aplicación ANTES de llamar a la ruta SomeComponent: 
Así es como se ve la aplicación DESPUÉS de llamar a SomeComponent Route: 
Como puede ver, hay un espacio en blanco que aparece después de llamar a la ruta SomComponent, aunque la aplicación y my_app están configuradas en 100vh de altura.
Quiero que el diseño se reajuste para llenar el espacio en blanco, después de llamar a la ruta SomeComponent, ¿cómo solucionarlo?
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
Puedes lograr eso usando CSS Grid
HTML:
<div class="app-layout"> <div class="navbar"></div> <div class="sidebar"></div> <div class="route-view"></div> </div>Estilos:
* { 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; }
·
Juan Pablo Isaza
Relatório
0
Solucioné el problema de que la aplicación no se estiraba para adaptarse a los elementos agregados por:
En aplicación.scss:
Yo añadí:
overflow: auto;es decir:
.app{ width: 100%; height: 100vh; ..... overflow: auto; } .my_app{ width: 100%; height: 100vh; ..... overflow: auto; }
·
Juan Pablo Isaza
Relatório
Responde à pergunta