html - 使 2 个 div 具有相同的高度(使用 Full Fiddle 工作)

Question

我有一个问题。我有一个列表在右边，我想使从顶部到灰色内容的高度。

我该怎么做？我知道的唯一方法是 height://make a value here until it fixes the problem;

这不是一个好办法。

有什么帮助吗？

.ticket-history {
  height: 100%;
  overflow-y: scroll;
}

.content {
  background: #ccc;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-8">
      <div class="content">
        <div class="row">
          <div class="col-xs-12">
            Stuff
          </div>
        </div>
        <hr>
        <h4>Inspection</h4>
        <div class="row">
          <div class="col-xs-12">
            stuff
          </div>
        </div>
        <hr>
        <h4>Parameters</h4>
        <div class="row">
          Stuff
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="bottom-options">
          <div class="col-xs-4">
            Stuff
          </div>
          <div class="col-xs-4">
            Stuff
          </div>
          <div class="col-xs-4">
            Stuff
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="text-right">
        <label class="status-label">Status </label>
        <span class="status">New</span>
      </div>
      <div class="ticket-history">
        <ul>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="" style="display:flex;">
  <div class="" style="width:30%; background-color:red;"> First Div</div>
  <div class="" style="width:30%; background-color:green;"> <p>Second Div </p> <p>Second Div </p> <p>Second Div </p> <p>Second Div </p> <p>Second Div </p> <p>Second Div </p> <p>Second Div </p> <p>Second Div </p></div>
</div>

您需要更改 HTMl 的结构并尽可能使用 flex。