css - HTML5/CSS - div 拉伸(stretch)大于 body 100%

Question

我正在尝试布置一个 Web 应用程序并遇到 div 延伸到 body 和 html 之外的问题。

http://jsfiddle.net/dex3703/Pftpu/

当设置为 100% 高度时，粉红色的内部 div 会延伸到其容器之外。为什么会这样，我该如何解决？

Answer 1

• #header 的高度为 55px。
• #topnav 的高度为 65px。
• #mainsection 的高度为 90%。
• #drawer 的高度为 50px。

您试图断言 55px + 65px + 90% + 50px = 100%，但您不能那样做。对于某些高度(整个内容的高度为 1700 像素，见下文)，这将是正确的，但不是所有高度:

55px + 65px + 90% + 50px = 100%
55px + 65px + 50px       = 10%
170px                    = 10%
1700px                   = 100%

---

编辑:您可以通过适本地使用相对/绝对位置来实现您想要的。请参阅以下 jsFiddle:http://jsfiddle.net/Pftpu/12/

请注意，由于整个页面周围的边框，这仍将大于 100%。您可以将它们包装在另一个 div 中，但我想通过仅更改与您遇到的主要问题相关的 CSS 属性来展示此示例。