Question

我正在尝试在页面右侧设置一个面板。它将在中间包含一些内联元素和svg图像。

我希望面板最大宽度为50％，高度最大为100％。 SVG图像应在保留宽高比以填充可用高度的同时增长。因此，容器将变宽。填充高度或容器宽度达到50％时，它应停止增长。

这是我想出的：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
}

.svgContainer {
  flex: 1;
}

.svgContainer svg {
  max-width: 100%;
  max-height: 100%;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300" height="214">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button>some button</button>
  </div>
</div>

我在视口大小上添加了一个动画，以说明几个问题：

当视口狭窄时，面板内容溢出。我希望svg缩小。
当面板太高时，svg和按钮之间会有空间，我想在按钮下移动此空间。

我使用flexbox（flex-direction: column + flex:1）做到了，但似乎我缺少了一些东西

Answer 1

对于when panel is too high there is space between the svg and the button, I'd like to move this space at the bottom.：删除svg元素的高度。

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
}

.svgContainer {
  flex: 1;
}

.svgContainer svg {
  max-width: 100%;
  max-height: 100%;
}


/* DEBUG */

#stopButton {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2em;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button style="flex-shrink: 0;">some button</button>
  </div>
</div>

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

#viewport {
  background: #FFF;
  transition: all 200ms;
  padding: 5px;
  position: relative;
  overflow: auto;
  animation: sizing 8s infinite;
}

.column {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px 15px;
  border: 1px dotted #000;
  max-height: 100%;
  max-width: 50%;
  text-align: center;
}

.svgContainer {
  flex: 1;
}

.svgContainer svg {
  max-width: 100%;
  max-height: 100%;
}


/* DEBUG */

#stopButton {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2em;
}

@keyframes sizing {
  0% {
    width: 300px;
    height: 200px;
  }
  25% {
    width: 500px;
    height: 200px;
  }
  50% {
    width: 500px;
    height: 400px;
  }
  75% {
    width: 300px;
    height: 400px;
  }
  100% {
    width: 300px;
    height: 200px;
  }
}

<div id="viewport">
  <div class="column">
    <h4>Some header</h4>
    <div class="svgContainer">
      <svg viewBox="0 0 300 214" width="300">
        <rect x="0" y="0"
          width="300" height="214" 
          stroke-width="5"
          stroke="#F00"
          rx="15" ry="15"
          fill="none"/>
         <circle cx="150" cy="107" r="80" stroke="#F00" stroke-width="5" fill="none"/>
    </svg>
    </div>
    <button>some button</button>
  </div>
</div>

带有svg的自适应伸缩列

1 个答案: