Question

下面是使用Bootstrap 3的简化布局。该行的中间列包含一个内联SVG，可提供从蓝色框到绿色框的各种转换。

我为什么要这样做？用浏览器CSS样式SVG很酷！而且，这样做意味着我不必为应用此设计元素的每种可能的行高和颜色组合生成一堆PNG。

虽然我可以使用JS根据最高的非SVG来动态设置col- * div的高度，但似乎应该有一种使用CSS的方法。

请注意，我已经尝试为display: flex元素设置.row（它是在样式表中注释掉）。虽然它确实确保了列的高度相等，但具有增加内容div而不是缩小样式一的效果。

这个Plunker包含在内，以防您像我一样比StackOverflow片段更容易使用。

html, body.stackoverflow-snippet {
  color: white;
  font-size: 25px;
  height: 100%;
}

.row {
  /*
   * Ultimately I would use the following rule to ensure the columns are equal
   * height, since their content is dynamic, but the problem is less obvious
   * when this rule is in effect.
   */
  /* display: flex; */
}

.row.desired-result div {
  /*
   * To see the desired effect, set the height to any known value. In my case, I
   * can't set the height of the divs explicitly the because user-generated
   * content populates these divs and may change their height.
   */
  height: 35px;
}

.row .rounded {
  padding-left: 0;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

svg {
  height: 100%;
}

svg circle {
  fill: blue;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body class="stackoverflow-snippet">
  <div class="container-fluid">
    <!-- first row: desired result -->
    <div class="row desired-result">
      <div class="blue col-xs-6">Desired result</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(explicit height)</div>
    </div>
    <!-- second row: just a visual break to separate the rows of interest -->
    <div class="row">
      <div class="col-xs-12">&nbsp;</div>
    </div>
    <!-- third row: natural height -->
    <div class="row">
      <div class="blue col-xs-6">Ack!</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(natural height)</div>
    </div>
  </div>
</body>

</html>

Answer 1

制作SVG position: absolute。然后，将相对于其父容器测量“ 100％”高度。只要您还记得将父单元格设置为position: relative，以使其成为合适的包含块即可。

.svg-container {
  position: relative;
}

.inline-svg {
  position: absolute;
  left: 0;
}

我们还为SVG单元格添加了一个不间断的空间，以在您将SVG设为绝对值时将其折叠到零高度。

.svg-container::before {
  content: '\a0'
}

结果：

html, body.stackoverflow-snippet {
  color: white;
  font-size: 25px;
  height: 100%;
}

.row {
  /*
   * Ultimately I would use the following rule to ensure the columns are equal
   * height, since their content is dynamic, but the problem is less obvious
   * when this rule is in effect.
   */
  /* display: flex; */
}

.row.desired-result div {
  /*
   * To see the desired effect, set the height to any known value. In my case, I
   * can't set the height of the divs explicitly the because user-generated
   * content populates these divs and may change their height.
   */
  height: 35px;
}

.row .rounded {
  padding-left: 0;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

svg {
  height: 100%;
}

svg circle {
  fill: blue;
}

.svg-container {
  position: relative;
}

.svg-container::before {
  content: '\a0'
}

.inline-svg {
  position: absolute;
  left: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body class="stackoverflow-snippet">
  <div class="container-fluid">
    <!-- first row: desired result -->
    <div class="row desired-result">
      <div class="blue col-xs-6">Desired result</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(explicit height)</div>
    </div>
    <!-- second row: just a visual break to separate the rows of interest -->
    <div class="row">
      <div class="col-xs-12">&nbsp;</div>
    </div>
    <!-- third row: natural height -->
    <div class="row">
      <div class="blue col-xs-6">Ack!</div>
      <div class="green rounded col-xs-1 svg-container">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5 svg-container">
        (natural height)</div>
    </div>
  </div>
</body>

</html>

如何在不给内联SVG（或它的父级）明确的高度的情况下将其显示为任意高度？

1 个答案: