将html内容拟合为div

Question

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

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

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

假设我有一个使用svg circle元素开发的饼图，或者在html中使用表标记的表格，我希望这些组件填充包含它们的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属性，以指定其中的哪些内容应填充区域并缩放以适合。