Question

我有一个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的原因。

关于什么可以解决这个问题的任何想法？

Answer 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>
        )
    }
}

这解决了我所有的问题：）

反应变化路线打破高度与布局

1 个答案: