我有一个单页网站,其中第一部分主要部分应该是观众屏幕/浏览器大小的 100%,第二部分应该在查看区域下方,所以当用户点击链接时,页面会向下滚动到第二部分。
我如何实现这一点。, 到目前为止我已经试过了,但它没有设置最小高度 yo 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;
...在这种情况下他们是你的 friend ...
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;
}
关于html - 如何将最小高度设置为屏幕的 100% 和页面的一半?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20968804/