将 html 内容放入 div [关闭]

Question

我正在使用 html 开发几个仪表板组件。 （例如表格、svg 元素等）

我不想指定这些组件的尺寸（宽度、高度），因为我稍后会在其他组件中重用它们。

我想让这些组件适合包含它们的 div。

假设我有一个用 svg circle 元素开发的饼图，或者一个在 html 中使用 table 标签的表格，我希望这些组件填充包含它们的 div。

有没有办法以百分比来指定这些元素的尺寸？

注意：以下代码中使用了ReactJS，但思路相同。

代码：

        <div class="wrapper">
            <svg>
                <g>
                    {this.props.children}
                </g>
            </svg>
        </div>

现在我想将一个元素作为 this.props.children 传递给这个 div，但我不想为该元素指定任何大小。我想使用 Bootstrap 在包装 div 元素中指定它。

Answer 1

.wrapper { position:relative }
.wrapper > * { position:absolute; top:0; left:0; width:100%; height:100% }

然后在您的 SVG 上添加一个 viewBox 属性，以指定其中的哪些内容应填充该区域并缩放以适应。