html底部的空白区域[重复]答案

【问题标题】：Empty space at the bottom of the html [duplicate]html底部的空白区域[重复]
【发布时间】：2016-02-08 00:51:05
【问题描述】：

我在窗口上的 html 文档之外遇到了空白问题。我有一个实时版本here 说明了这个问题。页面底部有大量空白，似乎超出了 html 文档本身的范围。我感觉这是由这个 CSS 引起的：

#content {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 640px;
overflow-y: scroll;
border: 1px solid black;
}

我正在使用主干查询 Flickr API 以获取数据，然后将它们显示为索引视图中的项目。但是，我认为这正在改变文档的高度，我似乎无法将其变小（窗口和文档的高度之后似乎很好，但是在滚动 div 之后有一个巨大的空白不在 html 文档中）。

编辑： 所以问题是由我设置为“可见性：无”的文本引起的。我已将其设置为“显示：无”，它解决了这个问题。我有“可见性：无”，因为我认为我无法使用 jQuery 访问像素宽度，但我显然错了。

【问题讨论】：

添加position:relative 似乎可行。
Here's an example 在容器上设置 position:relative 如何使绝对定位的孩子尊重溢出（而不是 no positioning）。
感谢您的帮助，这也有效！ :)

标签： javascript jquery html css backbone.js

【解决方案1】：

将高度设置为高度：自动；高度是硬编码的

【讨论】：

高度是硬编码的，因为我希望滚动的 div 是一个设定的高度，这样您就可以滚动项目而无需滚动页面的其余部分。将高度设置为自动并不能解决问题。

【解决方案2】：

您可以轻松地将#content 的高度更改为height: 100%。当然，相对大小对于嵌入式或外部 DOM 元素来说可能是有问题的，但是当我对您的页面进行试验时，对我来说没问题。

扩展：这个小影响是由overflow: auto css 设置引起的。浏览器不知道 div #content 的内容不会水平溢出，因此它可以放置在其垂直滚动条上。在某些浏览器中，有不同的overflow-x: 和overflow-y: 设置，但这不是标准的（即使在它们中也不能正常工作）。我的this 答案中有更多详细信息。

对于这个问题没有简单且独立于浏览器的解决方案。

【讨论】：

只滚动div#content效果不明显。快速滚动到 div#content 之后会显示大量空白空间。将高度设置为 100% 并不能达到我想要的效果。我正在尝试将 div#content 设置为固定高度，然后可以滚动浏览索引项。
@PeterBenavides 好的，我现在明白了。我扩展了我的答案，现在呢？
我不确定是溢出方向造成的。我很确定额外空间是由具有“可见性：隐藏”的 div 引起的
@PeterBenavides 然后为#content 设置一个“溢出：隐藏”，你会感到惊讶。 visibility: hidden div 从 ie6 左右开始在布局中是非实体。

【解决方案3】：

您需要在body 中使用.container 或在#content 周围使用div 和position: fixed。隐藏的列表元素被渲染并将父容器推到底部。

【讨论】：

谢谢。我最终将元素切换为“显示：无”。我正在使用可见性来测试像素宽度，但我使用它的功能在“显示：无”下工作正常。不过，我会将其标记为答案，因为这是解决问题的另一种方法。