如何隐藏元素而不让他们在页面上占用空间?

我使用visibility:hidden隐藏某些元素，但它们在隐藏时仍然占用页面空间。

我怎么能让它们在视觉上完全消失，就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?

376495 次浏览
小开
最佳答案

尝试设置display:none为隐藏，设置display:block为显示。

小开

使用style代替

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

display:none隐藏，并设置display:block显示。

小开

使用display:none是一个很好的选择，只是删除一个元素，但它将是也删除了屏幕阅读器。也有关于它是否影响SEO的讨论。有一篇关于这个主题的好文章单独列出

如果你只是想要隐藏和不删除作为一个元素，最好使用:

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

像这样，它也可以由屏幕阅读器读取。

这个方法唯一的缺点是，这个DIV实际上是被渲染的，它可能会影响性能，特别是在移动电话上。

小开

看，不要使用visibility: hidden;，而是使用display: none;。第一个选项将隐藏，但仍然占用空间，第二个选项将隐藏，不占用任何空间。

小开

下面是关于展示后放回原处的另一种看法:没有。不要使用display:block/inline等。相反(如果使用javascript)设置css属性显示为“(即空白)

小开

这个问题的答案是说使用display:none和display:block，但这对那些试图使用css过渡来显示和隐藏内容的人没有帮助。

这也让我抓狂，因为使用display会杀死任何css过渡。

一个解决方案是将这个添加到使用可见性的类中:

overflow:hidden

要做到这一点，确实取决于布局，但它应该在它所在的div中保持空内容。

小开 
$('#abc').css({"display":"none"});

这将隐藏内容，也不会留下空白。

小开

显示:没有是一个解，它完全隐藏了元素的空间。

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

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

display:none表示完全隐藏元素的空间。(尽管您仍然可以通过DOM与它交互)

小开

据我所知，这有四种可能

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

< em >显示:没有< / em >是避免占用页面空白的最好方法

小开

切换display不允许平滑的CSS过渡。相反，切换visibility和max-height。

visibility: hidden;
max-height: 0;
小开

感谢这个问题。我想要的正好相反，即一个隐藏的div仍然应该占据它在浏览器上的空间。因此，我使用visibility: hidden代替display: none。

小开

如果所有隐藏元素的其他选项都不适合你，还有另一个选项，我没有看到提到。假设元素没有子元素，它就能工作。

它将隐藏一个元素而不占用空间:

display: contents;

检查浏览器的支持，因为它是一个较新的CSS特性。

小开

将可见性设置为隐藏，我所知道的使其不占用空间的唯一方法是使用position:absolute，然后设置top, left等参数。虽然不理想，但很有效。

小开

如果显示:无;不管用，你必须加上clear: none;

小开

由于我一直在解决这个问题并进行研究，所以我想分享一下我的见解。如果您已经进入了这个页面，我假设您正在试图弄清楚为什么您的元素占用了页面上的空间，即使有样式。Display = "none"

最有可能的是，造成这种情况的原因并不是存在问题的元素;而是它的孩子、父母或兄弟姐妹。打开控制台，转到Elements选项卡。看看里面有什么可能占据空间的线索。也许你正在使用模板引擎，并没有意识到<br>是在动态<div>之外呈现的。或者，您应该瞄准嵌套更多的元素。在进行故障排除时，请尝试按照这些思路进行思考。


提交答案