HTML5/CSS - div拉伸超过身体100％

我想摆出一个web应用程序，并遇到伸展身体和html之外的div问题。HTML5/CSS - div拉伸超过身体100％

粉色内的div时设定为100％的高度其容器的外部延伸。为什么是这个，我该如何解决它？

2012-01-03 dex3703

你试图断言55px + 65px + 90% + 50px = 100%，但你不能这样做。这将是适用于某些高度（在您的整个内容的高度为1700px，见下文），但不是全部的高度：

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

编辑：你可以达到你想要通过使用相对什么/绝对位置。请参阅以下jsFiddle：http://jsfiddle.net/Pftpu/12/

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

2012-01-03 21:20:34

你会提出什么样的布局，使页眉和页脚在正确的位置固定高度，#mainsection填充剩余空间？ – dex3703 2012-01-03 21:38:32

请参阅我上面的编辑，了解绝对和相对CSS位置（以及附件[jsFiddle]（http://jsfiddle.net/Pftpu/12/）示例）。 – 2012-01-03 21:46:28

是不是绝对会与其他内容重叠？ – 2012-01-03 21:48:43

您正在混合像素和百分比，这是行不通的。

#mainsection拥有90％，为#header（65px），#topnav（55px）和#drawer（50px）留下10％。在700px的窗口高度处，保留了70px - 这比65 + 55 + 50 = 170px小很多。

你会需要的正是10x170 = 1700px的高度为你的布局工作 - 或者换句话说：从未混合像素和百分比...

2012-01-03 21:18:40 ptriek

你会建议什么样的布局，以便页眉和页脚在正确的位置固定高度，而#mainsection填充剩余空间？ – dex3703 2012-01-03 21:33:45

回答