Question

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

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

我的目的是让底部div（JsFiddle中的蓝色）直到页面高度的底部，但是停在页面底部，正确地绘制边框，就像在两侧一样。问题是我的div上面的内容确实有浮动属性，要求div有正确的“clear：both”属性（除非有另一种方法而不必硬编码像素大小）。

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

Answer 1

正如其他两张海报所说，我最终选择了JavaScript解决方案。如果有人能找到一个只有CSS的解决方案，不会对div的大小/内容做出任何假设，请发布它，我将更改接受的答案。这是我现在处理它的方式（这使用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);

“清楚：两个”+“高度：100％”超过页面底部

1 个答案: