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值。因此，下一个绝对定位的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，而不是依赖于初始的包含块。因此，在上面的演示中，我相对定位了.outer元素：

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

Answer 2

添加权限：0；似乎有帮助

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

div位置绝对高度不起作用

2 个答案: