Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以这样做：

HTML：

    <script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>

CSS：

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

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

如何同步元素的高度

1 个答案: