tmq tmq - 5 months ago 14
CSS Question

How to make this content div 100% of available height?

//// html ////


<body>
<div class="page">
<div class="menu"> menu </div>
<div class="content"> {% block content %}{% endblock %}</div>
<div class="footer"> footer </div>
</div>
</body>


//// css ////


html, body {
background: black;
height: 100%;
margin: 0;

}

.page {
min-height: 100%;
position: relative;
}

.menu {
background: #ff0000;
height: 100px;
}

.content {
padding-bottom: 75px;
background: #00ff00;
}

.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 75px;
background: #0000ff;
}


Output:

enter image description here

I'll give you a link to jsFiddle but it isn't working properly (not the same as in my browser) - http://jsfiddle.net/t3Gjx/3/
I need to get rid of black gaps, no matter how long is the content in green field (content field). I was trying with

min-height = 100%


in .content but with no success.

Answer

You could do something like this:

http://jsfiddle.net/t3Gjx/10/

html, body {
    background: black;
    height: 100%;

}

.page {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -75px; /* the bottom margin is the negative value of the footer's height */
}

.menu {
    background: #ff0000;
    height: 100px;
    position: relative;
    z-index: 555;
}

.content {
    background: #00ff00;
    margin: -100px 0 -75px;
    min-height: 100%;
    height: auto !important;
    height: 100%; 
}

.content:before {
    content: "";
    display: block;
    height: 100px;
    width: 100%;
}

.content:after {
    content: "";
    display: block;
    height: 75px;
    width: 100%;
}

.footer {
    width: 100%;
    height: 75px;
    background: #0000ff;
}

Explanation:

This uses the techniques outlined by this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

You make the .page 100% in height, and a set a negative margin at the bottom for the footer to collapse into. This ensures that the site isn't 100% in height + the height of the footer. The content uses a before and after block, plus negative margins to make itself 100% in height, minus the menu and footer.

Comments