我使用可视性:隐藏来隐藏某些元素,但它们在隐藏时仍然占用页面空间。
我怎么能让它们在视觉上完全消失,就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?
我使用可视性:隐藏来隐藏某些元素,但它们在隐藏时仍然占用页面空间。
我怎么能让它们在视觉上完全消失,就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?
当前回答
由于我一直在解决这个问题并进行研究,所以我想分享一下我的见解。如果您已经进入了这个页面,我假设您正在试图弄清楚为什么您的元素占用了页面上的空间,即使有样式。Display = "none"。
最有可能的是,造成这种情况的原因并不是存在问题的元素;而是它的孩子、父母或兄弟姐妹。打开控制台,转到Elements选项卡。看看里面有什么可能占据空间的线索。也许你正在使用模板引擎,并没有意识到<br>是在动态<div>之外呈现的。或者,您应该瞄准嵌套更多的元素。在进行故障排除时,请尝试按照这些思路进行思考。
其他回答
看,与其使用可见性:隐藏;使用display: none;。第一个选项将隐藏,但仍然占用空间,第二个选项将隐藏,但不占用任何空间。
显示:不显示是避免占用页面空白的最好方法
如果所有隐藏元素的其他选项都不适合你,还有另一个选项,我没有看到提到。假设元素没有子元素,它就能工作。
它将隐藏一个元素而不占用空间:
display: contents;
检查浏览器的支持,因为它是一个较新的CSS特性。
使用style代替
<div style="display:none;"></div>
显示:none是解决方案,这是完全隐藏元素与它的空间。
关于显示:无,可见性:隐藏
可见性:隐藏意味着标签不可见,但是在页面上为它分配了空间。
显示:none表示完全隐藏元素的空间。(尽管您仍然可以通过DOM与它交互)