如何为可见性预留空间：隐藏元素，当它们也是位置：绝对？

Question

我希望我的页面区域保留用于上下文相关帮助文本。除非悬停在某些特定元素上，否则它是空白的。但是，当然，有几个独立的文本可以从中选择可见的选择。这是一个页面流，下面有更多的东西。我尝试使用div“定位”，并在其中放置帮助div。每个帮助div都是position：absolute;顶部：0px;能见度：隐藏;目的是让JS一次可以看到其中一个，但这个空间将被保留用于任何帮助div中的最大文本。好吧，正如大多数人猜测的那样，因为帮助div是位置：绝对，它们的高度不会影响封闭div的高度，最终高度为零。

我怎样才能做到这一点？我不想使用像素大小来强制高度，因为它在某些浏览器/字体组合上几乎总是错误的，并且每次更改帮助文本时都会保持调整，或者新的更长的帮助段获得添加到此。

我有意义，还是我需要尝试画画？

Answer 1

是的，你是有道理的。正确指出包含元素正在折叠到零高度，因为它不包含任何具有大小的子流。没有简单的解决方案就没有使用Javascript，因为明显的替代方案意味着将它们全部作为流布局的一部分，这意味着容器将增长以容纳所有文本。

可行的解决方案：

1. 将display:inline-block应用于所有帮助文本以将它们放在一起，将它们放入宽度为10000px或更大的容器元素中，并将该元素封装在容器中与overflow:hidden。这样容器实际上将占据最大孩子的高度。然后激活文本需要将DOM中的元素移动到前面，以便首先绘制它，或者滚动以将其置于正确的位置，这可能很复杂。
2. 加载页面后，使用Javascript来衡量元素的实际高度，将最大的一个设置为容器的高度，然后将display:none应用于子项而不是visibility:hidden。

第二个选项最简单，也是我的首选。这一切都取决于您的具体情况，但是否有更好的选择。