如何让一个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 的东西。

谢谢！

编辑： jsFiddle链接。

- Elggetto

---

我可以提供一个JavaScript解决方案（当然还有其他的），但你确实让我在CSS方面感到困惑。点赞！ - thatidiotguy

@thatidiotguy 如果我能只用 JavaScript 制作一个网页，我肯定会的。哈哈。 - Elggetto

@Elggetto，我在jsfiddle或单独的html中尝试时似乎没有出现滚动条。我已经在Chromium和FF16中尝试过了。话虽如此，将父div的overflow设置为hidden是否可以解决您的问题？ - rahules

@rahules http://jsfiddle.net/akKWu/ 给你。想象一下 #container 是我的页面宽度和高度（手持设备）。我需要滚动条。我只是不想要额外的40像素。我想要类似于100％减去40像素的东西。 - Elggetto

@thatidiotguy 如果我可以的话，我会这么做。不幸的是，这是为客户而设计的，我不能依赖JavaScript！ - Elggetto

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}

- Niet the Dark Absol

---

谢谢，但这对解决我的问题没有帮助。 modalBody会尽可能地占据其父元素的最大高度。 如果我的屏幕高度为500px，则子级将占用500px。 我需要一种方法来绕过这个限制。 - Elggetto

@Elggetto，我对你在这里的回答感到困惑，Kolink的回答正好符合你所说的。我不确定为什么父元素会涉及到它，因为你正在使用position:fixed，它会自动捕捉到视口。您能否解释一下您需要的与此答案提供的有何不同？计算top:40px到bottom:0的结果为100% - 40。 - Pebbl

@pebbl 嗯，我尝试了这种方法，但是它并没有隐藏掉40像素的滚动条，反而给了#modal整个视口加上40像素。底部的0毫无作用。 - Elggetto

@Elggetto 我已经更新了你的jsfiddle（与你问题中的代码略有不同），并使用Kolink提供的基本答案，它似乎对我有效--除非我真的误解了。http://jsfiddle.net/akKWu/2/ 请记住，#modalBody不能设置height:100%，因为这会在与top:40px和bottom:0混合时导致问题..您还可能在使用IE6或更低版本时遇到问题。 - Pebbl

@pebbl 我正式脑残了。我在100%上卡了这么久，居然没想到把它拿掉...谢谢你！！现在它能工作了。抱歉浪费了你的时间哈哈。 - Elggetto

@Elggetto 没关系，完全不浪费时间。澄清事情是好的 :) - Pebbl

Answer 2

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

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

- Manuel Choucino

---

那会有什么不同吗？容器具有 position:fixed。 - Niet the Dark Absol

Answer 3

看起来你只是不想让modalHead元素影响modalBody的高度，这种情况下你可以这样做：

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

一旦你有了它，如果需要的话，你可以使用左和上来调整其余部分的尺寸和位置。

编辑：

根据你的jsfiddle，我认为最简单的解决方案是按照我上面建议的方法，只需在modalBody内的第一个元素（在你的jsfiddle示例中，即p标签）上添加margin-top: 40px或top: 40px（取决于定位方式）。

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

- rogMaHall

---

问题是头部现在遮挡了我的身体。如果我添加40像素的填充或边距，它会被添加到100%的高度中。 - Elggetto

好的，看了你的jsfiddle链接，容器已经设置了高度。如果是这样，只需要改变body的百分比来补偿头部的高度:modalHead(height)/modalBody(height)。所以在你的jsfiddle中，body的高度应该是90%，而不是100%，因为60px/600px=.1或10%。你也不会像我上面建议的那样使用绝对定位。明白了吗？ - rogMaHall

容器没有设置固定的高度。它只是为了说明手持设备的概念。它将是可变的。不过，你提到的第一个子元素的想法也不错！我会尝试一下！ - Elggetto

差不多了！由于绝对定位的原因，我正在失去滚动条在标题下面的一部分。 - Elggetto