DIV设置 visibility:hidden;时，它是不显示的，但却占据了一块 空白的空间 。

Posted 2023-04-15

想让 不显示的 div ，不让它 在 占空间 。当 点击 相应的按钮时 ，来 切换 不同的 div ，让 其它的 显示 。

问 下 精通DIV的高手，有解决的办法 吗？先谢谢 了！

参考技术A 不要用visibility，用display

display:none;隐藏（不占空间的）
display:block;显示

通过js的onclick事件切换div的display状态就行了！;
document.getElementById("#").style.display="none"本回答被提问者采纳 参考技术B 用display:none;就不占位置了.

display:none和visibility:hidden的区别？

display与元素的隐藏

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。  

 

visibility与元素的隐藏

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。