0

为什么在以下情况下不会<div>自动扩展到内部的高度？<svg>

CSS

    #curve-svg {
  height: auto;
  max-width: 400px;
  position: relative;
  border: 1px solid red;


  svg {
    position: absolute;
    width: 100%;
    max-width: 400px;
    height: auto;
  }
}

HTML

<div class="pure-u-1" id="curve-svg">
  <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">

    <path id="curve" style="fill:none;stroke-width:0.35px;stroke:#333;" d="blah" blah blah/>
  </svg>
</div>

我正在使用 PURE.css，如果这有什么不同的话，但是我在 PURE.css 中还没有发现任何会阻止 div 高度扩大的东西；这也是 Bootstrap 3 和 Bootstrap 4 的问题。

非常感谢任何和所有帮助或建议！

4

1 回答 1

1

造成这种情况的是height="100%"svg 元素上的属性。给它一个特定的高度（例如以像素为单位）。然后它将正确调整大小。这是一个例子。

于 2016-10-09T23:18:27.433 回答