如何隐藏元素而不占用页面空间？

Question

我使用visibility:hidden来隐藏某些元素，但尽管它们被隐藏了，它们仍然占用了页面上的空间。

有什么方法可以使它们在视觉上完全消失，就像它们根本不在DOM中一样（但实际上并没有将它们从DOM中删除）？

- ripper234

---

这个问题已经很久了，但我还是想加一条评论，因为最近我发现自己遇到了其他人可能会遇到的情况。我需要隐藏一个元素并保留其 offsetTop，而 display:none 会将 offsetTop 设置为0。我的解决方案是使用 visibility: hidden 然后将宽度和高度设置为0。一旦我需要再次使元素可见，我就使用Javascript删除了这三个属性。这是一个有点 hacky 的解决方案，但对于几乎所有用例都有效。 - rappatic

Answer 1

尝试设置display:none以隐藏元素，并设置display:block以显示元素。

- Huusom

---

无法使用此选项从DOM中删除元素。请阅读问题。 - Pranay Rana

并非所有的项目都应该设置为display:block，有些需要设置为display:inline（例如<span>、<a>或<img> DOM元素）。 - Mauro

问题要求隐藏元素，而不是从DOM中删除它们。 - Mauro

@pranay：这个问题表述得不是很清楚，但是Huusom正在解决用户遇到的问题。 - Claudio Redi

@ripper234：抱歉，我不是有意冒犯 :-(。我的意思是你的想法似乎是隐藏元素并避免占用空间。你并不在意元素是否从DOM中移除。 - Claudio Redi

Answer 2

应该使用样式（style）而不是像这样

<div style="display:none;"></div>

- Salil

---

很遗憾，这对我无效 - 使用 display:none 仍然会留下空白的空间。 - mbuc91

Answer 3

切换display属性无法实现平滑的CSS过渡效果。相反，应该同时切换visibility和max-height属性。

visibility: hidden;
max-height: 0;

- Irfan434

---

这在处理动画时非常有用。因为我们使用类似于 transform: translateX(-100%) 的方式隐藏元素在可见区域之外。我们不想使用 display: none。 - zhuhang.jasper

这对我很有用。谢谢。 - Ayan

这应该是被接受的答案，因为它不会像请求的那样从DOM中删除。 - Kildareflare

Answer 4

使用display:none是一个很好的选项，可以仅仅删除一个元素，但这也将同时删除屏幕阅读器中的该元素。此外，人们还在讨论它是否影响SEO。关于这个话题，A List Apart有一篇很好的简短文章《现在你看到我》。

如果您真的只想隐藏而不是删除元素，请使用：

div {
  position: absolute; 
  left: -999em;
}

这样可以被屏幕阅读器阅读。

这种方法唯一的缺点是，这个

实际上被渲染了，可能会影响性能，特别是在移动电话上。

- alboth - undkonsorten.com

---

如果您选择将某些内容定位为绝对位置，大多数情况下可以使用 visibility: hidden;，假设您有其他绝对元素，它们不会与空间发生冲突，只会与 z-index 发生冲突。仅为了隐藏一个元素，我会使用 visibility。 - Dejan.S

Answer 5

使用 display: none; 代替 visibility: hidden;，前者可以隐藏元素同时不占用任何空间，而后者虽然能够隐藏元素但仍会占用空间。

- alejnavab

Answer 6

display: none是一个解决方案，它完全隐藏了元素及其所占空间。

关于display:none和visibility:hidden的故事

visibility:hidden表示标签不可见，但在页面上为其分配了空间。

display:none表示完全隐藏元素及其所占空间（尽管您仍然可以通过DOM与其交互）。

- Hidayt Rahman

Answer 7

这个问题的答案是使用display:none和display:block，但这对于试图使用visibility属性来显示和隐藏内容的人没有帮助。

这也让我很疯狂，因为使用display会破坏任何CSS过渡效果。

一个解决方案是将以下内容添加到正在使用visibility的类中：

overflow:hidden

为了使其正常工作，它确实依赖于布局，但应该将空内容保留在其所在的 div 中。

- Omar

---

如果你使用visibility:hidden和visibility:visible，并将元素设为position:fixed，你就不会遇到那个问题了，这就像魔术一样。 - John Balvin Arias

Answer 8

使用display:none可以隐藏元素，使用display:block可以显示元素。

- Pranay Rana

---

他询问如何在视觉上移除它们，"就好像它们不在DOM中一样"，而不是从实际的DOM中移除它们。 - Arve Systad

问题说明不要从DOM中删除它们，只需使它们消失。就好像它们根本不在DOM中一样（但实际上并没有将它们从DOM中删除）。 - Mauro

@pranay：visibility: hidden 只是停止了内容的显示，但仍然使用垂直/水平空间，而 display:none 则删除了元素的垂直/水平空间。 - Mauro

不，它不会。visibility: hidden; 使元素不可见，但仍占据空间。display: none; 使文档表现得好像从未存在过一样。 - Olly Hodgson

Answer 9

以下是另一种关于如何在display:none后将它们放回的方法。不要使用display:block/inline等。相反（如果使用JavaScript），将CSS属性显示设置为''（即空白）。

- Anurag Priyadarshi

Answer 10

在我的知识范围内，有四种方法可以实现：

1. HTML <button style="display:none;"></button>
2. CSS #buttonId{ display:none; }
3. jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);

- Ananda G