如何将div设置为100％-Xpx高度？

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％高度PLUS 40px。导致额外40px的滚动条。因此，我尝试使用负边距，高度：自动，但没有运气。有没有办法做到这一点？

基本上，我想要的是高度线：100％-40px。

比你！

修改 Link to jsFiddle

Answer 1

试试这个：

#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}

Answer 2

尝试从身体标记和HTML中删除所有内容

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

Answer 3

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

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

如果你有这个，你可以使用左侧和顶部来处理其余的尺寸和位置。

编辑：

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

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