1

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

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

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

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

4

1 回答 1

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);
于 2012-10-11T20:42:44.217 回答