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

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

如何设置<section> </section>中元素的高度

1 个答案: