如何将高度同步到元素

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;
    }

小提琴：https://jsfiddle.net/debraj/s84yxh8L/