使2个div相同的高度（使用全小提琴工作）

时间：2018-07-06 11:18:33

标签： html css twitter-bootstrap

我有问题。我在右侧有一个列表，我想确定从上到下的高度。

我该怎么做？我知道的唯一方法是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>

4 个答案:

答案 0 :(得分：0)

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

您需要更改HTM1的结构，并在可能的情况下使用flex。

答案 1 :(得分：0)

<div class="col-xs-12" style="display: flex;">
  <div class="col-xs-8" style="flex: 1;">
    You can use this to make same Equel Height
  </div>
  <div class="col-xs-4" style="flex: 1;">
    You can use this to make same Equel Height
  </div>
</div>

答案 2 :(得分：0)

.maincontent{
    display: flex;
}
 .bg {
     background: #ccc;
}
.ticket-history {
    height: 100%;
    overflow-y: scroll;
}
.sidebar{    position: absolute!important;
    right: 0;
    height: 100%;
    overflow-y: scroll;}
<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 maincontent">
        <div class="col-xs-8 bg">
            <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 sidebar">
            <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>

答案 3 :(得分：0)

希望我理解你的问题。

.div-height {
    height: 300px;
}
.ticket-history {
    overflow-y: scroll;
    width: 100%;
    height: 290px;
    background-color: #eee;
}
.content {
  background: #ccc;
  padding: 10px 50px;
}
.bottom-options {
    padding-left: 50px;
}
.padding-right{
    padding: 35px 0px !important;
}
.padding-left {
    padding: 10px 0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="row">
  <div class="col-xs-8 padding-right">
    <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">
          <div class="col-xs-12">
            stuff
          </div>
        </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 padding-left">
      <div class="text-center">
        <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>

相关问题
最新问题