如何設置<section><section>

Question

中的元素的高度我使用<section>來在我的網站中顯示這組內容ADDRESS。在網站的第一頁有一個標題，它的高度是已知的，但底部包含幻燈片的<div>具有未知高度，但它必須覆蓋<section>的其餘部分。我如何設置height這個<div>，使它覆蓋整個頁面的底部？

---

UPDATE： 通過設置height:100%它的工作原理，但我希望它是正是它的大小必須是屏幕尺寸的基礎。因爲我要垂直居中幻燈片，如果我將底部div高度設置爲100％，則幻燈片將不會垂直居中。這裏是代碼

<section id="s1"> 
    <div id="header-top"><?php include 'header-top.php'; ?></div> 
    <div id="s1-container"> 
     <div id="frontpage_slideshow"> 
      <?php include 'slideshow.php' ?> 
     </div> 
    </div> 
</section> 

這是CSS代碼

#header-top { 
height: 105px; 
width: 100%; 
background: url("../images/header-top/header-top-bg.jpg") repeat scroll 50% 0 rgba(0, 0, 0, 0); 
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2); 
width: 100%; 
position: relative; 
padding: 0 20px 10px 20px; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
-ms-box-sizing: border-box; 
direction: rtl 
} 

section { 
height: 100% 
} 

#s1-container { 
background: url('../images/front-page/header-row.jpg') repeat scroll 50% 
    0 rgba(0, 0, 0, 0); 
width: 100%; 
height: 100%; 
text-align: center 
} 

Answer 1

我會使用顯示：表，錶行和表單元格。

的jsfiddle：http://jsfiddle.net/maximgladkov/TQxaW/

HTML

<div id="container"> 
    <div class="block"> 
     <div id="header" class="content">Header</div> 
    </div> 
    <div class="block"> 
     <div id="section" class="content">Section</div> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

.block { 
    display: table-row; 
} 

.content { 
    display: table-cell; 
    border: 1px solid red; 
} 

#header { 
    height: 200px; 
}