Question

我的目标浏览器如果是firefox 10.我有两个分区被另一个包围。第一个表示标题，第二个表示正文。周围的div代表一个容器。 header div的高度为50px，我希望body div占据剩余高度。我写了这个示例代码，我看到body div正在取容器的高度，我得到一个滚动条。

body, html {
    margin: 0px;
    height: 100%;
}
.container-style {
    height: 100%;
}
.header-style {
    border: 1px solid black;
    height: 50px;
}
.body-style {
    border: 1px solid black;
    height: 100%;
}

<div id="container" class="container-style">
    <div id="header" class="header-style">
    </div>
    <div id="body" class="body-style">
    </div>
</div>

然后我使用了calc css5方法并解决了它。以下是代码

.body-style {
    border: 1px solid black;
    height: calc(100% - 50px);
}

但这不适用于不支持css5的浏览器。然后我用css position属性来实现它。

.body-style {
    border: 1px solid black;
    position: absolute;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 50px;
    width: 100%;
    top: 0px;
    left: 0px;
}

我不知道它是否适用于其他浏览器。但至少它可以在firefox 10上运行。

我想知道是否有任何解决方案不涉及使用css位置属性和简单的解决方案。

Answer 1

您需要添加否定margin-top以反击您的padding-top。您的padding-top目前等于50px，但您的标题元素的边框为1px，因此您的padding-top应该等于52px：

.body-style {
    ...
    padding-top: 52px;
}

您的margin-top必须等于-52px：

.body-style {
    ...
    padding-top: 52px;
    margin-top: -52px;
}

您的.body-style选择器现在看起来像这样：

.body-style {
    border: 1px solid black;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 52px;
    margin-top: -52px;
    width: 100%;
}

JSFiddle demo

设置div的高度以匹配没有位置和计算的剩余高度

1 个答案: