div position absolute height not working

Question

I'm trying to create a layout with a header, a main content area and a footer.

Both header and footer are fixed height but content area needs to fill the width and height (without scrollbars)

the current code is here

<div class="outer">
    <header>
        movistar ovacion
    </header>

    <div id="content" >

        <section class="step-1">
            
            <div class="box">
                <a href="#">HOMBRE</a>
            </div>
            <div class="box">
                <a href="#">MUJER</a>
            </div>
            <div class="box">
                <a href="#">NIÑO</a>
            </div>
            <div class="box">
                <a href="#">NIÑA</a>
            </div>

        </section>
    
    </div>

    <footer>
        footer
    </footer>
</div>

The CSS:

html,body{
        height: 100%;
    }

    header {
        height: 160px;
        background: blue;
    }

    #content {
        
    }

    footer {
        height: 60px;
        position:absolute;
        width:100%;
        bottom:0; 
        background: green;
    }

.outer {
    
}
    .step-1 > div {
        width: 50%;
        height: 50%;
        position: absolute;     
    }

    .step-1 > div:first-child {
        background: #DDD;
        left: 0;
    }
    .step-1 > div:nth-child(2) {
        background: #CCC;
        right: 0;
    }
    .step-1 > div:nth-child(3) {
        background: #72CCA7;
        left: 0;
        bottom: 0;  
    }
    .step-1 > div:nth-child(4) {
        background: #10A296;
        right: 0;
        bottom: 0;
    }

Right now the content area doesn't work as it should, the 4 boxes doesn't adapt to the height.

I think i'm doing something wrong with div positions or clearings but i can't find the problem.

How can i fix it? Is there a better way of doing this layout?

Answer 1

Adding right: 0; seem to helped

top: 100%;
left: 0;
right: 0;

Answer 2

The problem is that the first and second <div> element within the .step-1 don't have an explicit top value. Hence the next absolutely positioned DIVs overlap those two:

.step-1 > div:first-child {
    background: #DDD;
    left: 0;
    top: 0;  /* Added declaration */
}

.step-1 > div:nth-child(2) {
    background: #CCC;
    right: 0;
    top: 0;  /* Added declaration */
}

On the other hand, the #content itself should be positioned absolutely in this case in order to fill the remaining space between the header and the footer:

#content {
    position: absolute;
    top: 160px;   /* = height of the header */
    bottom: 60px; /* = height of the footer */
    width: 100%;
}

WORKING DEMO.

Personally, I prefer creating a new containing block for the absolutely positioned elements instead of relying to the initial containing block. Because of that, In the above demo I positioned the .outer element relatively:

.outer {
    position: relative;
    height: 100%;
}