Question

我有单页网站，其中第一部分主要部分应该是观看者屏幕/浏览器尺寸的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%;

}

http://jsfiddle.net/4yk2q/

Answer 1

使用position: relative;和position: absolute;进行游戏......在这种情况下，他们是您的朋友......

Solution demo

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;
}

Answer 2

视口高度（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

如何将最小高度设置为100％的查看屏幕和页面的一半？

2 个答案: