如何根据子 SVG 内容对齐父 div 高度

Posted 2023-02-16

【中文标题】如何根据子 SVG 内容对齐父 div 高度

【英文标题】：How to align parent div height based on child SVG content

【发布时间】：2021-12-07 06:17:00

【问题描述】：

我想根据子内容为父 div 分配高度（这里 SVG 是我的孩子，它可以根据数据具有不同的内容）。如果我为父级或子级分配固定高度，则会在内容更改时出现问题。它适用于宽度（根据内容自动更改 div 宽度）但不适用于高度。这是我的代码 sn-p。

React.useEffect(() => 
    // calling legend function and passing div id to function
    colorLegend("#legend");
, [dep]);

function colorLegend(legend: string) 
    // logic
    if (colorLegend) 
       select(legend)
       .append("svg")
       .attr("overflow","visible")
       .attr("width", 150 + "px")
       .call(colorLegend);
    


return (
    <div style=position: "absolute",right: 16,top: 
      10,backgroundColor: "black",borderRadius: "5px",padding: 
    "10px">
        <label style= color: "#6F6F6F" >
          name
        </label>
        <div id="legend"></div>
    </div> 
);

小提琴链接：https://jsfiddle.net/1sv3Lwar/

【参考方案1】：

我认为您的父母 <div> 没有垂直“增长”的原因是因为您正在使用：

position: "absolute"

使用绝对定位或浮动会导致这种情况。

虽然，假设您需要绝对定位，所以添加：overflow: hidden 应该可以解决问题。

【讨论】：

没用。溢出：隐藏在我的情况下不起作用

可以为您的问题编写一个代码笔/工作示例吗？

让它在代码笔中工作会有点困难，但我可以尝试分享图像以更好地理解。在图像中，您可以看到背景黑色没有覆盖整个内容。我也不能为父级分配固定高度，因为内容可能会有所不同。

你还可以看到我已经添加了溢出：对 SVG 可见，如果我不添加，那么其余的内容将隐藏在父 div 中并且不会完全显示。我希望背景黑色应该覆盖所有内容，并且它的高度应该直到标签“H4”，遗憾的是我不能指定固定高度，因为内容可能会有所不同。

这里是小提琴链接：jsfiddle.net/1sv3Lwar