将 html 内容装入 div

Question

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

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

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

假设我有一个用 svg 圆形元素开发的饼图，或者一个 table 在 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 属性，以指定其中的哪些内容应填充该区域并缩放以适合。

将 html 内容装入 div

Fitting html content into a div

html

frontend

svg

twitter-bootstrap