Реагировать на изменение высоты маршрутов с разметкой
У меня есть приложение React, где, если я изменю маршрут на страницу с небольшой высотой всего body
не имеет максимальную высоту для окна (html
действительно имеет полную высоту).
У меня есть стандарт index.html
настроить здесь
<html>
<body>
<div id="app"></div>
<script src="client.min.js"></script>
</body>
</html>
Тогда вот мой App.js
файл:
import React from "react"
import ReactDOM from "react-dom"
import {Router, hashHistory} from "react-router"
import routes from "./Routes"
const app = document.getElementById('app')
ReactDOM.render((
<Router history={hashHistory} routes={routes()}>
</Router>
), app)
А вот мой Routes.js
файл:
import React from "react"
import {Route, IndexRoute} from "react-router"
import Layout from "./Layout"
import About from "./pages/About"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Register from "./pages/Register"
import SignIn from "./pages/SignIn"
import Terms from "./pages/Terms"
export default() => {
return (
<Route name="root" path="/" component={Layout}>
<IndexRoute component={Home}/>
<Route path="/about" component={About}/>
<Route path="/signin" component={SignIn}/>
<Route path="/register" component={Register}/>
<Route path="/terms" component={Terms}/>
<Route path="*" component={NotFound}/>
</Route>
)
}
Наконец вот мой Layout.js
:
import React from "react"
import ReactDOM from "react"
import DevTool from 'mobx-react-devtools'
import Control from "./components/layout/Control"
import Footer from "./components/layout/Footer"
import Header from "./components/layout/Header"
import Sidebar from "./components/layout/Sidebar"
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div className="wrapper">
<DevTool /> {/* Remove for PRODUCTION */}
<Header />
<Sidebar />
{this.props.children}
<Footer />
<Control />
<div className="control-sidebar-bg"></div>
</div>
)
}
}
Все мои маршруты ведут на страницы с очень небольшим содержанием, поэтому он не охватывает всю страницу. В каждом случае весь body
высота переносится на высоту содержимого, а html
остается 100% с окном.
Я пытался отладить все. Там нет отступов или полей на теле или HTML, отображаемых при проверке элементов. Я также попытался добавить height
а также min-height
100%
атрибуты к body
теги со встроенным стилем и до сих пор не получили достойных результатов.
Страница автоматически исправляется, как только размер окна изменяется или я перезагружаю страницу, но это устраняет множество причин, по которым я использую React.
Любые идеи о том, что может это исправить?
1 ответ
Мне удалось получить исправление, это довольно специфическая проблема (которую я понял из-за отсутствия ответа). Но в случае, если кто-то еще наткнулся на такую проблему.
Все компоненты моих страниц имели следующую визуализацию:
export default class About extends React.Component {
render() {
return (
<div className="content-wrapper">
{/* All my about code goes in here */}
</div>
)
}
}
Я закончил тем, что удалил content-wrapper
classNames из всех разделителей контейнера страницы и сделал следующее Layout
страница:
export default class Layout extends React.Component {
render() {
const { location } = this.props
return (
<div className="wrapper">
<DevTool /> {/* Remove for PRODUCTION */}
<Header />
<Sidebar />
<div className="content-wrapper">
{this.props.children}
</div>
<Footer />
<Control />
<div className="control-sidebar-bg"></div>
</div>
)
}
}
Это решило все мои проблемы:)