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

【问题标题】：Set height of a div to match the remaining height without position and calc设置 div 的高度以匹配没有位置和计算的剩余高度
【发布时间】：2013-12-10 17:05:07
【问题描述】：

如果是 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 位置属性和简单解决方案的解决方案。

【问题讨论】：

使用 margin-top 而不是 padding-top
这看起来很简单。如果有效，有什么问题？您希望正文随内容动态扩展还是保持原位并滚动？
@leigero 是的，它工作正常。但我只是想知道是否有任何其他解决方案不使用position: absolute
@Igle Margin-top 不行。因为border-box在计算高度时不会考虑边距。然后我会得到一个垂直滚动条。
当body的内容超过长度时，是否希望body永远不展开？

标签： html css

【解决方案1】：

您需要添加否定的margin-top 来抵消您的padding-top。你的padding-top当前等于50px，但是你的header元素有一个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.

【讨论】：