html - 如何在<section>中设置元素的高度

我使用<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
}

最佳答案

我将使用display：table，table-row和table-cell。

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

关于html - 如何在<section>中设置元素的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21730185/