隐藏的div占用空间问题

Question

我已将我的网站导航设置为隐藏/显示div（使用行为）。 它的工作相当不错，但我现在意识到一个问题，即div即使隐藏时也会占用空间，从而使我的包装器的高度过高。

我真的希望高度根据显示的内容量扩展和收缩。 http://shanuea.lockernerd.co.uk/camel/ 这些div是绝对定位并设置为visibility:hidden。 如果需要更多信息，请告诉我。

- Shaun Wilson

---

可能是重复的问题如何隐藏元素，而不让它们占据页面空间？ - Oofpez

你应该将 @Stefans 的回答标记为正确答案 =) - Johan Hjalmarsson

Answer 1

如果您希望 div 不显示时不占用空间，请使用 display:none 而非 visibility:hidden。

- Stefan Haustein

---

我在 @print 媒体查询中使用 display:none !important; 来隐藏导航条，但是它在页面左侧留下了一个大的空白区域（它是左侧的垂直菜单）。有什么解决方法吗？ - Ryan

也许这不是由导航引起的，而是由其他原因引起的？ - Stefan Haustein

在http://stackoverflow.com/questions/18555185/setting-displaynone-div-inside-div-still-takes-up-space/18555232#comment29909071_18555232找到了相关内容，并通过`div.content { width: auto; }`使其正常工作。 - Ryan

Answer 2

未来的谷歌用户请注意：
我有一些我想要对访问者隐藏的<span>标签。在每个<span>后面是一个<br>。这些<br>标记会使看起来<span>标记在将其display属性设置为none后仍然占用空间。

- Webdevotion

---

这是我的问题：我忘记了那些<br/>标签。我的解决方案是将我的<span>更改为<div>，这样它就自动具有display: block。 - Jashaszun