我想得到像这个网站一样的效果:http://make-lemonade.co/themes/kodax/登陆页面占据显示器的整个高度
为此,我使用Bootstrap 3.1.1页面。
我的代码:
.HTML:
<div id="panorama-home">
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<h3 class="text-muted">
<img src="img/LOGO1.png" />
</h3>
</div>
<div class="row">
<div class="col col-md-12">
<h1 style="font-size:52px; padding-top:140px; text-align:center">
Text field
</h1>
<!--<p style="margin-left:160px; color:white;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
</div>
</div>
<div id="boxlinks" class="arrow" style="position: relative; text-align:center; padding-top:70px;padding-bottom:30px;">
<a href="#marketing-text"><img src="img/down-arrow.png" style="width:100px; height:100px;"/></a>
</div>
</div>
</div>
.CSS:
#panorama-home {
background: url("img/home.jpg") no-repeat center center;
border-bottom: 1px solid #EEEEEE;
color: #FFFFFF;
display: block;
padding:120px 0;
position:relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
将高度设置为 100vh
#panorama-home {
...
height: 100vh;
}