[英]How to set minimum height to the 100% of the viewing screen and half of the page?
我有一个页面站点,其中第一部分的主要部分应该是查看器屏幕/浏览器大小的100%,第二部分的部分应该位于查看区域的下面,因此当用户单击链接时,页面会向下滚动到第二部分部分。
我如何实现这一目标。,到目前为止,我已经尝试过了,但是尚未将最小高度设置为100%
HTML:
<div class="container">
<div class="firsthalf">
this is the first part of the site
<a href="#help"> <i class="fa fa-question-circle fa-lg"></i>
<div class="notice">this is aligned to bottom of first half
</div></div>
</div>
<div class="container">
<div id="help" class="secondhalf">
<div class="col-md-8 col-md-offset-2">
<div class="well">
we are in second part of the site
</div>
<a href="#top" class="btn btn-default"><i class="fa fa-arrow-up "></i> Top</a>
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
}
.firsthalf{
height:100%;
}
.notice{
margin-bottom:0%;
padding-bottom:5px;
}
.secondhalf{
margin-top:25%;
margin-bottom:50%;
padding-top:25px;
min-height:50%;
}
position: relative;
和position: absolute;
他们在这种情况下是你的朋友
body, html {
height: 100%;
}
.container {
height:100%; /* first make container full height */
}
.firsthalf {
height:100%;
border:1px solid #000;
position: relative; /* make parent div relative */
}
.notice {
padding-bottom:5px;
position: absolute; /* this does the base line trick */
bottom: 0;
right: 0;
}
视口高度(vh)您正在寻找高度:50vh; 或高度:100vh;
您可能会发现一些有用的选项:
vh(视口高度)vw(视口宽度)vmin(视口最小长度)vmax(视口最大长度)
http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
.secondhalf{
margin-top:25%;
margin-bottom:50%;
padding-top:25px;
height:50vh;
}
编辑:确保您需要支持的浏览器支持它。 http://caniuse.com/#feat=viewport-units
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.