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

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

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

当前回答

切换显示不允许平滑的CSS过渡。相反，切换能见度和最大高度。

visibility: hidden;
max-height: 0;

其他回答

显示:不显示是避免占用页面空白的最好方法

Display:none隐藏，设置Display:block显示。

使用display:none是一个很好的选择，只是删除一个元素，但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章

如果你真的只是想隐藏而不是删除一个元素，最好使用:

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

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

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

切换显示不允许平滑的CSS过渡。相反，切换能见度和最大高度。

visibility: hidden;
max-height: 0;

使用style代替

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

推荐文章