css - "clear: both"+ "height: 100%"越过页面底部

Question

我承认 CSS 不是我的菜，所以我可能在这里遗漏了一些明显的东西。我的问题是，当我有一个元素同时具有“clear: both;”的 CSS 属性时和“高度:100%；”该元素实际上最终超过了页面高度。这是一个例子:http://jsfiddle.net/d9mv7/

请注意，尽管是“100%”，但蓝色框架会导致出现滚动条并超出页面高度。当删除“clear: both”属性时，它会按预期呈现(JsFiddle 仍然添加不需要的滚动条，但在正常呈现时，我没有那个问题)。

我的意图是让底部的 div(JsFiddle 中的蓝色部分)一直到页面高度的底部，但停在页面底部，正确绘制边框，方法与两侧相同。问题是我确实在具有 float 属性的 div 上方有内容，要求 div 具有“clear: both”属性才能正确呈现(除非有另一种方法而不必对像素大小进行硬编码)。

我已经尝试将顶部( float 元素)和底部 div 包装在一个额外的 div 中，这样它们的高度是相对于该 div 而不是页面的。这似乎使重叠更小(滚动条更短)，但并没有让它消失。使用“溢出:隐藏；”对我也不起作用，因为它仍然使 div 和内容超出底部，只隐藏滚动条。你们建议我如何处理这个问题(最好不用 JavaScript)？

Answer 1

正如其他两位发帖人所建议的，我最终选择了 JavaScript 解决方案。如果有人可以找到不对 div 的大小/内容做出任何假设的纯 CSS 解决方案，请发布它，我将更改已接受的答案。以下是我目前的处理方式(这使用 jQuery，但可以使用原生 JS 完成类似的逻辑):

$('#second-panel').height(document.height-$('#first-panel').height());

或者，如果您的 div 具有足够厚的边距/填充/边框并且您希望它们也包含在测量值中(因为 element.height() 没有)，您可以使用 outerHeight:

var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);