如何设置<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; 
}