html - 如何同步元素的高度

Question

如何根据屏幕尺寸同步图像的高度和文本区域的高度？我不想使用文本区域的左边框，因为我想要在左栏和文本之间进行视觉分离。我不想同时调整栏的宽度，因为它只是页面中的视觉分隔符；该栏应该与其右侧的文本一样长。 注意:栏不限于图像；它可以是任何东西，只要结果是具有正确高度的彩色垂直条即可。

    html {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #fff8dc;
      color: grey;
      font-family: Arial;
      font-size: 1em;
      position: relative;
      min-height: 100%;
    }
    .common {
      background-color: #fff8dc;
      float: left;
      width: 25%;
      height: 100vh;
      text-align: center;
      padding: 0 40px 10px 40px;
    }
    .detail {
      background-color: #fff8dc;
      float: left;
      margin: 0 20px 0 0;
      overflow: auto;
      height: 100%
    }
    .text {
      margin: 0px 40px 0px 40px;
      background-color: #ffffff;
      padding: 10px 20px 10px 20px;
    }

<div class="common">
  <p>blabla</p>
</div>

<div>
  <div class="detail">
    <img src="widgets/spacer.gif" alt="vertical bar" width="30px" height="400px" style="background-color: #E3B90A;">
  </div>

  <div class="text">
    <h1>BLABLA</h1>
    <p>blablabla</p>
    <p>blablabla</p>
    <p>blablabla</p>
  </div>
</div>

Answer 1

你可以这样做:

HTML:

<div class="common">
  <p>blabla</p>
</div>
<div class="container">
  <div class="detail">
    <img src="widgets/spacer.gif" alt="vertical bar">
  </div>
  <div class="text">
    <h1>BLABLA</h1>
    <p>blablabla</p>
    <p>blablabla</p>
    <p>blablabla</p>
  </div>
</div>

CSS:

html {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #fff8dc;
      color: grey;
      font-family: Arial;
      font-size: 1em;
      position: relative;
      min-height: 100%;
    }
    .container{
      display: flex;
      flex-direction: row;
    }
    .common {
      background-color: #fff8dc;
      float: left;
      width: 25%;
      height: 100vh;
      text-align: center;
      padding: 0 40px 10px 40px;
    }
    .detail {
      background-color: #E3B90A;
      width: 30px;
      height: auto;
    }
    .detail img{
      width: 100%;
      height: auto;
    }
    .text {
      width: 100%;
      background-color: #ffffff;
      padding: 10px 20px 10px 20px;
    }

fiddle :https://jsfiddle.net/debraj/s84yxh8L/