Question

我有这个JsFiddle

中的应用程序布局

我需要这个svg然后在保持纵横比的同时伸展到#contentComponent的全高，并且sideComponent会相应地占用剩余的宽度。如果不使用js，这是否可行？

下面的小提琴代码：

<div id="appComponent">
  <div id="topComponent"></div>
  <div id="contentComponent">
    <div id="svgComponent">
      <div id="svgInlineWrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMinYMin">
          <circle cx="32" cy="32" r="32" fill="blue" />
        </svg>
      </div>
    </div>
    <div id="sideComponent">
      <div id="sideScrollable">
        <div class="sideRow">
          Test1
        </div>
        <div class="sideRow">
          Test2
        </div>
        <div class="sideRow">
          Test3
        </div>
        <div class="sideRow">
          Test4
        </div>
      </div>
    </div>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

#appComponent {
  height: 100vh;
  width: 100%;
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}

#topComponent {
  flex: 0 0 40px;
  width: 100%;
  background-color: #00ff00;
}

#contentComponent {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

#svgComponent {
  height: 100%;
  flex: 1 1 auto;
  background-color: #aa00aa;
}

#svgInlineWrapper {
  height: 100%;
}

#svgInlineWrapper svg {
  height: 100%;
}

#sideComponent {
  position: relative;
  flex: 1 1 200px;
  background-color: #0000ff;
}

#sideScrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.sideRow {
  width: 200px;
  height: 100px;
}

编辑：

看起来它在chrome和firefox中完全不同。在firefox中它延伸到100％的高度，但它似乎不适用于chrome。

Answer 1

尝试使用min-height代替height。

#svgComponent {
  min-height: 100%;
  flex: 1 1 auto;
  background-color: #aa00aa;
}

Answer 2

更新下面的css，将100%更改为100vh以扩展宽高比。

#svgInlineWrapper svg {
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
}

#appComponent {
  height: 100vh;
  width: 100%;
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}

#topComponent {
  flex: 0 0 40px;
  width: 100%;
  background-color: #00ff00;
}

#contentComponent {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

#svgComponent {
  height: 100%;
  flex: 1 1 auto;
  background-color: #aa00aa;
}

#svgInlineWrapper {
  height: 100%;
}

#svgInlineWrapper svg {
  height: 100vh;
}

#sideComponent {
  position: relative;
  flex: 1 1 200px;
  background-color: #0000ff;
}

#sideScrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.sideRow {
  width: 200px;
  height: 100px;
}

<div id="appComponent">

  <div id="topComponent"></div>
  <div id="contentComponent">
    <div id="svgComponent">
      <div id="svgInlineWrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMinYMin">
          <circle cx="32" cy="32" r="32" fill="blue" />
        </svg>
      </div>
    </div>
    <div id="sideComponent">
      <div id="sideScrollable">
        <div class="sideRow">
          Test1
        </div>
        <div class="sideRow">
          Test2
        </div>
        <div class="sideRow">
          Test3
        </div>
        <div class="sideRow">
          Test4
        </div>
      </div>

    </div>
  </div>

</div>

在flexbox中拉伸svg到最大高度保持纵横比

2 个答案: