高度：如果在 dom 加载时隐藏元素，则自动计算不正确，然后显示答案

【问题标题】：Height: auto calculating incorrectly if element is hidden when dom loads, then shown later高度：如果在 dom 加载时隐藏元素，则自动计算不正确，然后显示
【发布时间】：2014-07-16 05:40:52
【问题描述】：

我有一个 svg，css 宽度：100%，高度：100%。 wrap 元素占据了整个屏幕的宽度。高度是自动的。 wrap div 定义了 svg 的尺寸。

例如

<div id="svg-wrap" style="width: 100%; height: auto;">
    <svg style="width: 100%; height: 100%;"></svg>
</div>

如果我加载隐藏了这些元素的页面（显示：无），当 dom 准备好后显示元素时，它似乎会混淆高度的计算。例如，svg 的尺寸最终会变得非常不成比例，例如 1024px 宽 x 25px 高，而不是 500px 高。

我假设如果对象被隐藏，它无法计算对象的宽度是多少，它会杀死自动高度。我错过了什么？或者有什么解决方法？

【问题讨论】：

您可能想在计算之前对 svg 使用 load 函数。如下所示，您可以使用可见性或不透明度。

标签： javascript jquery html css svg

【解决方案1】：

使用 visibility:hidden; 而不是 display:none;，你就可以开始了！

display:none; 从字面上隐藏了代码中的对象，而visibility:hidden; 只是从用户的视图中隐藏了对象。

【讨论】：

我不知道。这是完美的！
很高兴能够提供帮助！ ;)