React里单页面div自适应浏览器高度占满屏幕

思路：可以用绝对定位方式，让div占满屏幕，css样式如下：

  height: 100%;

width: 100%;

position: absolute;

top: 0px;

bottom: 0px;

例子：

render() {

return (

< body >

< div className= "container" >

< h1 className= "login-title" >Computer Examination </ h1 >

< Form onSubmit= {this. handleSubmit } className= "login-form" >

< FormItem >

< Input prefix= { < Icon type= "user" style= {{ color: 'rgba(0,0,0,.25)' } } /> } placeholder= "管理员账号/职工号/学号" />

</ FormItem >

< FormItem >

< Input prefix= { < Icon type= "lock" style= {{ color: 'rgba(0,0,0,.25)' } } /> } type= "password" placeholder= "密码" />

</ FormItem >

< FormItem >

< Checkbox className= "login-form-checkbox" >记住我 </ Checkbox >

< a className= "login-form-forgot" href= "" >忘记密码 </ a >

< Button type= "primary" htmlType= "submit" className= "login-form-button" >

登陆

</ Button >

</ FormItem >

</ Form >

</ div >

</ body >

);

}

css：

.container {

text-align: center;

background-image: url( ../images/backImg.jpg);

height: 100%;

width: 100%;

background-size: cover;

position: absolute;

top: 0px;

bottom: 0px;

}