CODEWITHSUNDEEP
htmlcssheight
M a m a D
M a m a D

Reputation: 2139

How to set height for elements in a <section>

I use <section> to display set of contents in my website in this ADDRESS. in the first page of website there is a header and its height is known, but the <div> in the bottom which contains the slideshow has an unknown height, but it must cover the rest of the <section>. how can I set height for this <div> such that it covers the whole bottom of the page?

UPDATE: by setting height:100% it works but I want it to be exactly what its size must be base on the screen size. because I'm going to vertically center the slideshow, if I set the bottom div height to 100% the slideshow wont be vertically center. here is the code

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

this is css code

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

Upvotes: 1

Views: 3194

Answers (1)

Maksim Gladkov
Maksim Gladkov

Reputation: 3079

I would use display: table, table-row and 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;
}

Upvotes: 2

Related Questions