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

回答1:

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/

回答2:

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

回答3:

Try positioning the content to be right above the footer

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

回答4:

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

来源：https://stackoverflow.com/questions/25602001/make-content-div-fill-remaining-height

标签

css

html5

css3