html - 如何为 中的元素设置高度

Question

我使用 <section>在此 ADDRESS 中显示我网站中的一组内容.在网站的第一页有一个标题，它的高度是已知的，但是 <div>包含幻灯片的底部高度未知，但它必须覆盖 <section> 的其余部分.如何设置 height为此<div>使其覆盖整个页面底部？

---

更新:通过设置 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;
}