css - div位置绝对高度不起作用

Question

我正在尝试创建一个带有页眉、主要内容区域和页脚的布局。

页眉和页脚都是固定高度但内容区域需要填充宽度和高度(没有滚动条)

当前代码是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>

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;
    }

现在内容区域无法正常工作，4 个框无法适应高度。

我认为我在 div 位置或清理方面做错了，但我找不到问题。

我该如何解决？有没有更好的方法来进行这种布局？

Answer 1

问题是第一个和第二个<div> .step-1 中的元素没有明确的 top值(value)。因此，下一个绝对定位的 DIV 与这两个重叠:

.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 */
}

另一方面，#content在这种情况下，它本身应该绝对定位，以填充页眉和页脚之间的剩余空间:

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

WORKING DEMO .

就个人而言，我更喜欢创建一个新的 containing block对于绝对定位的元素，而不是依赖于初始包含 block 。因此，在上面的演示中，我定位了 .outer。元素相对:

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