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

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


当前回答

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

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

display: contents;

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

其他回答

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

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

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

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

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

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

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