Реагировать на изменение высоты маршрутов с разметкой

У меня есть приложение 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-height100% атрибуты к 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>
        )
    }
}

Это решило все мои проблемы:)

Источник
Другие вопросы по тегам