通过布局反应变化的路线中断高度 [英] React changing route breaks height with layout
问题描述
我有一个React应用程序，如果我将路由更改为高度较小的页面，则整个body的窗口没有最大高度(html的高度是全部).
I have a React application where if I change the route to a page with a small height the entire body doesn't have a max height for the window (the html does have full height).
我在这里有标准的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％.
All my routes go to pages with very little content so it doesn't cover the full page. In every case the entire body height wraps to the height of the content while the html remains 100% of with window.
我已经尝试了一切调试.通过检查元素，在正文或html上没有填充或空白.我还尝试过使用内联样式将height和min-height 100%属性添加到body标记中，但仍然没有得到令人满意的结果.
I've tried debugging on everything. There's no padding or margin on the body or html rendered by inspecting the elements. I've also tried adding height and min-height 100% attributes to the body tags with inline styling and still didn't get any decent results.
页面调整大小或重新加载页面后，页面会自动修复，但这消除了我使用React的很多原因.
The page automatically fixes itself as soon as the window resizes or I reload the page but that eliminates a lot of the reason to why I am using React.
关于什么可以解决此问题的任何想法?
Any ideas on what could fix this?
推荐答案
我设法解决了这个问题，这是一个非常具体的问题(由于缺乏响应，我已经收集了该问题).但是万一其他人偶然发现了这样的问题.
I managed to get a fix, this is quite a specific problem (which I've gather from the lack of response). But in-case anyone else stumbled across a problem like this.
我所有的页面组件都具有以下呈现方式:
All of my pages components had the following render:
export default class About extends React.Component {
render() {
return (
<div className="content-wrapper">
{/* All my about code goes in here */}
</div>
)
}
}
我最终从所有页面容器分隔符中删除了content-wrapper className，然后对Layout页面进行了以下操作:
I ended up removing the content-wrapper classNames from all the page container dividers and did the following to the Layout page:
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>
)
}
}
这解决了我所有的问题:)
This solved all my problems :)
这篇关于通过布局反应变化的路线中断高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
