CSS 100 percent height body and element

Question

I am having an issue making one of my elements 100% within an overall layout that is 100%.

I have tried different positioning solutions and I either end up with hidd

Answer 1

Another solution is to use javascript (obviously not the cleanest way but in some cases it can be useful).

Using jQuery:

//Get height
var divHeight = $('#div').height();

//Apply css rule
$('#anotherDiv').css('height', divHeight);

Answer 2

Answering animuson: actually the following code is necessary for IE6 support:

min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/

IE6 doesn't understand !important, but it does treat height as min-height. So to support both IE6 and modern browser you have to use the exact same code (order is important).

Answer 3

In your code footer has position:absolute but the actual position (eg. bottom: 30px;) is not given. Also, if you want the .content or .push to affect the .footer position, they would have to be in the same flow (eg. both position:static;). Giving footer position:absolute by definition takes the footer positioning from the normal flow, so this is incompatible with the objective.

I assume what you're trying to do is get a page that is 100% even with little content, and a footer that's always on the bottom of the page/screen.

FooterStickAlt is a good cross-browser solution to achieve that. http://www.themaninblue.com/experiment/footerStickAlt/

Answer 4

Without being able to look at the code until a little later, I'd suggust putting the class "clearfix" onto the div that isn't fully expandning with the white.

Here is where you can get a good definition of what clearfix is, and a definition for the css.

Answer 5

Quite late answer, however it might be useful for others. You can simply use 100vh (vh is viewport-height unit)

Answer 6

The correct css should look like this:

<style type="text/css" media="screen">
    html,body
    {
        margin:0; padding:0; height:100%;
    }
    .wrapper
    {
        position:relative;
        min-height:100%;
        /*background: #fef;*/
    }
    .container
    {
        margin: 0 auto;
        width: 930px;
        padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
        /*background: #fff; */
    }
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
    {
        float: left;
        width: 240px;
        /*background: #efe;*/
    }
    .right
    {
        float: left;
        width: 690px; 
        /*background: #efa;*/
    }
    .right .content
    {
        padding: 10px;
    }
    .clear
    {
        clear: both;
    }
    .footer
    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        /*background: #eff;*/
    }
</style>

I'm sure this will help you.

<div class="wrapper">
    <div class="container">
        <div class="left">
           left
        </div>
        <div class="right">

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

        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

This will look like you wanted to have it. The footer is at the bottom, everytime, just as you wanted to have it :) Hope it helps!