在 CSS 中使用隐藏的子元素强制父元素的高度

Question

如果我有一个隐藏的子元素（使用 display: none 或 visibility: hidden），我怎样才能让父元素 div 保持它的高度，以便当子元素可见时,父身高不变?

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

Answer 1

如果您使用visibility: hidden;隐藏child，space仍然会被保留。您可以通过设置 visibility: visible;.

再次显示它

引用 MDN docs for visibility:

The visibility CSS property can show or hide an element without affecting the layout of a document (i.e., space is created for elements regardless of whether they are visible or not).

Answer 2

display:none 从流程中删除元素，因此无法让父元素保持高度（除了硬编码固定值）。它还应该对屏幕阅读器和抓取工具隐藏它。

visiblity:hidden 使元素保持在流中，因此，为它保留 space，因此父元素将保持高度，就像元素可见一样。

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>

在 CSS 中使用隐藏的子元素强制父元素的高度

Force a parent's height with hidden child element in CSS

css

height

hidden

编辑：