Question

我有两列布局，我想在左边画一个svg，在右边画一些元素。我希望SVG的高度按照第2列的高度（即右边的一个）进行缩放。为了实现两列布局，我使用了flex-box css。这是显示问题的jsfiddle。

任何人都可以帮助我解决我的错误。

    <div class="row">
    <div class="col">
        <svg style="width:100%;height:100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" x="0" y="0" fill="#E61875" rx='10' ry='10' />
        </svg>
    </div>
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

期望的结果是，如果第二个Div的高度增加，SVG的高度也应该增加，类似地，如果第二个Div的高度减小，则SVG的高度应该减小。

我已经更新了小提琴，它似乎在firefox中工作，但在chrome中，它将高度设置为150px并且不更改值。我仍然没有找到工作。

Answer 1

目前尚不清楚问题是什么，因为你的JSfiddle不包含SVG。

要使SVG成为列的整个高度，您需要删除填充和将SVG设置为display:block。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.col {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: solid;
}
svg {
  display: block;
}

<div class="row">
  <div class="col">
    <div style="width:60px;height:100%;">
      <svg style="width:100%;height:100%" viewbox="0 0 50 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100" x="0" y="0" fill="#E61875" rx='10' ry='10' />
      </svg>
    </div>
  </div>
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</p>
  </div>
</div>

此外，目前还不清楚假设的最终结果是什么样的。我怀疑可能需要进行一些调整。

SVG高度缩放不如预期

1 个答案: