html - 如何在 100%-Xpx 高度有一个 div？

Question

我在使用简单的 div 高度和百分比时遇到问题。我已经搜索了网络，但没有运气。这是布局：

<div id="modal">
    <div id="modalHead">HEAD</div>
    <div id="modalBody">BODY</div>
</div>

就那么简单。css（精简）：

#modal{position:fixed; top:0; left: 0; height:100%;}
#modalHead{height:40px}
#modalBody{height:100%}

问题是我得到 100% 的高度加上 40px。导致额外的 40px 滚动条。因此，我尝试使用负边距，高度：自动，但没有运气。有没有办法做到这一点？

基本上，我想要的是高度线中的东西：100%-40px。

比你！

编辑： 链接到 jsFiddle。

score 3 · Accepted Answer

试试这个：

#modal{position:fixed;top:0;left:0;right:0;bottom:0}
#modalHead{height:40px}
#modalBody{position:absolute;left:0;right:0;top:40px;bottom:0}

score 0 · Accepted Answer

尝试从您的正文标签和 HTML 中删除所有内容

html, body{margin:0px; padding:0px border:0px}

score 0 · Accepted Answer

听起来您只是不希望 modalHead 元素影响 modalBody 的高度，在这种情况下您可以这样做：

#modalHead{height:40px; position: absolute;}

一旦你有了它，如果需要，你可以使用 left 和 top 来弄乱它的其余尺寸和位置。

编辑：

离开你的jsfiddle，我想说最简单的解决方案是按照我上面的建议做，只需在modalBody的第一个元素中添加一个margin-top：40px或top：40px（取决于定位）。在您的 jsfiddle 示例中，这将是 p 标签。

#modalBody p:first-child{margin-top: 40px;}

3 回答 3