css - 在 CSS 中强制隐藏子元素的父级高度

Question

如果我有一个隐藏的子元素(带有 display: none 或 visibility: hide)，我怎样才能拥有父 div保持其高度，以便当子级可见时，父级高度不会改变？

我是否需要在父级上设置绝对高度，还是仍然可以让它计算子级的高度？

Answer 1

display:none从流中删除元素，因此无法使父元素保持高度(除了硬编码固定值)。它还应该对屏幕阅读器和爬虫隐藏它。

visiblity:hidden将元素保持在流中，因此保留为其保留的空间，因此父级将保持高度，就像元素可见一样。

opacity:0也将表现得像 visibility:hidden ，同时允许将元素的显示过渡/动画化为 opacity:1 .

所以你应该使用 visibility:hidden或opacity:0 ，具体取决于您是否想以跳跃显示或过渡方式显示元素。

编辑:

还应该注意的是，visibility:hidden 不会触发事件(例如单击、悬停等)，而 opacity:0 则会触发事件。因此，甚至在一些罕见的情况下，您可以同时使用两者。例如，如果您希望元素开始隐藏，然后通过过渡显示，并链接另一个事件，该事件仅在元素可见时触发

在下面的示例中，有一个链接到 div 元素的单击事件，该事件仅在可见时触发(因此不能仅使用不透明度)，但在显示时也会有一个转换(因此不能仅使用可见性)

$('button').click(function() {
		$('.opacity').toggleClass("visible");
});

$('.opacity').click(function() {
		alert("clicked");
});

div {
    width: 100vw;
    height: 100vh;
    transition: opacity 1s ease;
    background: chartreuse;
}

.visibility{
  visibility:hidden;
}


.opacity{
  visibility:hidden;
  opacity:0;
}

.visible{
  opacity:1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
toggle
</button>

<div class="opacity"> opacity:0 </div>
<hr>