CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29169

make content div fill remaining height

I have a page layout in which I have a fixed header which can have any height and a footer positioned at the bottom of the page. I'm looking for a css solution so that the content div fills the remaining space (vertically). In the jsfiddle below I've tried to do this, but as you can see the content is behind the footer.

HTML: 

<main>
    <header>
        <ol>
            <li>bar</li>
            <li>foo</li>
        </ol>
    </header>
    <section>
        <div class="content"><div>
    </section>
    <footer></footer>
</main>

CSS:

header {
    background-color: #abc;
    z-index: 1000;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
}

html, body, main, section {
    height: 100%;
    display: block;
}

.content{
   background-color: #000; 
   height: 100%;
}

footer {
    background-color: #def;
    bottom: 0;
    display: block;
    height: 54px;
    position: absolute;
   width: 100%;

}

Is this possible with pure css(3) ?

jsfiddle

Upvotes: 3

Views: 665

Answers (4)

monsur.hoq
monsur.hoq

Reputation: 1131

I made sticky footer using this tutorial. I think it's easy and convenient to use.

CSS CODE

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML CODE

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

DEMO URL

Upvotes: 0

Steven Web
Steven Web

Reputation: 1961

Here a diffrent approach:

HTML:

<header>
    <ol>
        <li>bar</li>
        <li>foo</li>
    </ol>
</header>
<main>
    <section>
        <div class="content"></div>
    </section>

    <div class="push"></div>
</main>
<footer></footer>

CSS:

    html, body {
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    header {
        background-color: #abc;
        z-index: 1000;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    main {
        min-height: 100%;
        height: auto !important;
        margin-bottom: -54px;
    }

    main > section{
        padding-top: 72px;
    }

    .content {
        background-color: #000;
    }

    .push {
        height: 54px;
    }

    footer {
        background-color: #def;
        height: 54px;
    }

Now the footer is always at the bottom aslong the content doesn't fill the hole page. In that case the "push" element provides enough space to deny overlapping of footer and content.

Your content div ist now placed under the footer through the padding. The height is actually 0 because of missing content. In my approach the content div fits always the content inserted.

Keep in mind that a) for responsive purpose you had to know about the header height and adjust the padding of the section using media queries b) the same for the footer. Adjust the height of the push element and adjust the margin-bottom value.

jsFiddle

Upvotes: 1

JohannesB
JohannesB

Reputation: 2015

It is a bit of an ugly solution, but if you make the margin-top of the content div as -54px and add a div inside it with padding-top:54px, it works as expected.

HTML:

 <div class="content"><div class="contentwrapper"></div><div>

CSS:

.contentwrapper {
    padding-top:54px;
}
.content{
   background-color: #000; 
   height: 100%;
   margin-top:-54px;
}

Fiddle: http://jsfiddle.net/dohqn8m4/1/

Upvotes: 1

JNF
JNF

Reputation: 3730

Try positioning the content to be right above the footer

bottom: <footer-height>;
position: absolute;

Upvotes: 0

Related Questions