How to put a min-height in a relative class css?

问题

I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container. Like this the website would occupy at least all the windows in it's height.

My HTML code (a part ^^)

    <div id="wrap">
    <div id="banner"></div>
    <div>
        <div id="whoami" class="corpus"></div>
        <div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content.  I can't pass the footer in absolute position</div>
    </div>
    <div id="footer"></div>
</div>

The CSS that goes with this

html, body {
    margin:0;
    padding:0;
    background:#fff;
    height:100%;
}
#wrap {
    background-color:#ff0;
    min-height:100%;
    width:1000px;
    left:50%;
    margin-left:-500px;
    position:absolute;
}
#banner {
    background-color:blue;
    height:150px;
    width:1000px;
    position:relative;
}
.corpus {
    width:800px;
    min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
    margin-left:100px;
    background-color:grey;
    position:relative;
    height:auto;
    margin-top:5px;
}
#footer {
    height:100px;
    width:1000px;
    background-color:purple;
    position:relative;
    z-index:1;
    bottom:0;
    margin-top:5px;
}

A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/

回答1:

Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.

Demo

Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer

来源：https://stackoverflow.com/questions/24354557/how-to-put-a-min-height-in-a-relative-class-css

标签

html

css

css-position