如何將最小高度設置爲100％的查看屏幕和一半的頁面？

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