How to set height for elements in a


Tags: html,css,height

Problem :

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
}


Solution :

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

    CSS Howto..

    how to move 2 divs on hover with css

    How to make a website look like a Windows Office application? [closed]

    Table borders not showing correctly

    How to position background image in bottom right corner? (CSS)

    How to attach a div to a particular dimension in html

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    Show/Hide Div's via | Save Scrollbar | Save State

    Bootstrap tooltip showing behind modal window

    How to style a table cell in JavaFX2 using CSS (without removing hover/selection etc.)

    How do I change ASP.NET App_Themes based on what Skin is selected in RadSkinManager?

    how to make html table first row 'absolute'

    how to highlight currently opened page link in css

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    CSS: How to center texts with transitioning position?

    How to style the last element before another specific element in CSS? [duplicate]

    Yii2 how to include multiple css files from specific view or controller action

    How do I handle the hover in this recursive menu using jQuery?

    How do I use “:nth-of-type” to select an element after the element is updated by jQuery?

    How to limit height of div when part of 2 vertical divs in fixed parent div

    How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

    How to get hovering shadow under a letter with CSS-only?

    How to select a .list-cell, in javaFX CSS

    How to make a split screen video with full height?

    show play icon on image hover

    How to ignore css property by override (bootstrap 3)?

    How to add css and js files on node pages independent of the theme?

    How can I set a google-font as default-font in CKEditor?

    How to change the included CSS files on button click?

    How to avoid wrapping in CSS float