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。因此，我尝试使用负边距 height:auto，但没有成功。有办法做到这一点吗？

基本上，我想要的是高度线上的东西: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}