Question

我在主div中有两个div。问题是，我希望能够设置主div的大小，并且对于div里面我希望能够将顶部div设置为固定大小，并且其下的div应该填充该区域的其余部分主div。

我将在这里给出一个代码示例，但这不起作用，因为底部div使用％来填充其余部分，无论主div是什么大小。

这是一个代码示例

<html lang="en"><head><style>

    .outer {
        width: 400px;
        height: 400px;  
        background-color:#0000FF;
    }

    .innerTop {
        width: 100%;
        height: 50px;   
        background-color:#008800;
    }

    .innerBottom {
        width: 400px;
        height: 100%;   
        background-color:#B6E6FB;
    }


</style>

</head>
<body>

    <div class="outer">
        <div class="innerTop">
            Upper
        </div>
        <div class="innerBottom">
            Lower
        </div>
    </div>      

</body></html>

Answer 1

将height: 100%更改为

height: calc(100% - 50px);

在innerBottom。

这会减去 50px 的高度，因为innerTop 50px。

如果您担心浏览器兼容性，可以使用：

height: -moz-calc(100% - 50px);
height: -o-calc(100% - 50px);
height: expression(100% - 50px);
height: calc(100% - 50px);

<强> DEMO

Answer 2

使用绝对定位来定位顶部div，然后对底部div应用适当的边距，使它们不重叠。

还要确保将box-sizing: border-box;应用于所有元素，以便为此布局正确完成计算。

* { box-sizing: border-box }

.outer {
    width: 400px;
    height: 400px;  
    background-color:#0000FF;
}

.innerTop {
    width: 100%;
    height: 50px;   
    background-color:#008800;
    position:absolute;
    top:0;
}

.innerBottom {
    width: 400px;
    margin-top:50px;
    height: 100%;   
    background-color:#B6E6FB;
}

http://jsfiddle.net/qDgS8/

主div中的两个div，一个具有固定大小

2 个答案: