Css &引用；清楚：两者都是“+&引用；高度：100%“；通过页面底部

我承认CSS不是我喜欢的，所以我可能遗漏了一些明显的东西。我的问题是，当我有一个同时具有CSS属性“clear:both”和“height:100%”的元素时，该元素实际上会超过页面高度。以下是一个例子：

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

我的意图是让底部div（JsFiddle中的蓝色div）一直到页面底部的高度，但在页面底部停止，正确地绘制边框，方法与在两侧相同。问题是，我确实在div上面有具有float属性的内容，要求div具有“clear:tware”属性才能正确渲染（除非有其他方法不必硬编码像素大小）

---

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

正如另外两张海报所建议的，我最终使用了JavaScript解决方案。如果有人能找到一个CSS唯一的解决方案，不做假设的大小/内容的div，请张贴它，我会改变接受的答案。以下是我目前的处理方式（这使用jQuery，但类似的逻辑也可以用原生JS实现）：

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

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

---

正如另外两张海报所建议的那样，我最终选择了一个JavaScript解决方案。如果有人能找到一个CSS唯一的解决方案，不做假设的大小/内容的div，请张贴它，我会改变接受的答案。以下是我目前的处理方式（这使用jQuery，但类似的逻辑也可以用原生JS实现）：

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

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

---

我上周和这个魔鬼搏斗过。没有js真的不是一个好方法。但是jQuery使它变得简单。这就是我的经验。这只是几行代码，似乎没有引起任何问题。这些相对垂直的问题要么是硬编码的，要么是JSD的。我上周与这个魔鬼搏斗过。没有js真的不是一个好方法。但是jQuery使它变得简单。这就是我的经验。这只是几行代码，似乎不会引起任何问题。这些相对垂直的问题要么是硬编码的，要么是JSD的。