Question

我试图让网页上的两列高度相同。列的高度未设置为高级。我想要完成的是A列总是等于B列。如果A列有更多内容，它必须得到一个滚动条。

我在父容器中有2列但是A列较小或A列拉伸父容器。 A列的高度由B列决定。该项目使用bootstrap。

<div class="parent col-md-12">
  <div class="colA col-md-3"></div>
  <div class="colB col-md-9"></div>
</div>

期望的结果：

如果A列为50px且B 100px，则为A 100px
如果A列为100px且B 100px，则为A 100px（无需更改）
如果A列为150px且B 100px，则为A 100px

Answer 1

对于HTML的微小更改，这可以通过Flexbox实现。

Columnb将采用ColumnB的高度，但ColumnA的内容位于绝对定位的div中，高度为100％（并且溢出）。

＆＃13;

.parent {
  display: flex;
  margin-bottom: 1em;
}
.colA {
  position: relative;
  background: pink;
  flex: 1;
}
.colB {
  height: 75px;
  flex: 1;
  background: lightblue;
}
.inner {
  position: absolute;
  height: 100%;
  overflow: auto;
}
.tall .colB {
  height: 180px;
}

＆＃13;

<div class="parent">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

<div class="parent tall">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

＆＃13;

Answer 2

因为你想要一个滚动条，我不能想到没有JS就可以实现这一点。

＆＃13;

Textbox1.DataBindings.Add(
    "Text", 
    this, 
    "myInteger.Value", 
    false, 
    DataSourceUpdateMode.OnPropertyChanged
);

＆＃13;

function resize(){
$('#col-2').height($('#col-1').height());
}

$(function(){
resize();
});

＆＃13;

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.column{
  width: 50%;
  float: left;
  padding: 1.25rem;
  overflow: scroll;
}

＆＃13;

Answer 3

您需要使用javaScript，因为高度不是预定的

＆＃13;

var colA = $('.col-a'),
    colB = $('.col-b'),
    AHeight = $('.col-a').height(),
    BHeight = $('.col-b').height();

if ( BHeight > AHeight ) {
  colA.height(BHeight);
} else {
  colA.height(BHeight).addClass('scroll');
}

＆＃13;

.parent {
  overflow: hidden; 
}
.parent [class^="col"] {
  float: left;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}
.parent [class^="col"]:nth-child(even) {
  background: #ccc;
}
.parent [class^="col"]:nth-child(odd) {
  background: #eee;
}

.scroll {
  overflow-y: scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="col-a">
  <stong>Column A</stong>
    <p>
Lorem ipsum dolor sit amet, lacinia a scelerisque lectus ut, magna semper curabitur neque luctus et sodales, porttitor sollicitudin laoreet donec nam mattis, placerat fusce justo, in at tempor. In et, sem et ac in. Blandit aenean, pellentesque rutrum lacinia volutpat morbi mollis nulla. Interdum in neque duis vivamus, lacus non at, vel consectetuer vitae metus. Molestie vehicula vestibulum dui suscipit, arcu et aliquam ullamcorper.
</p>
  </div>
  <div class="col-b">
  <stong>Column B</stong>
    <p>
Lorem ipsum dolor sit amet, lacinia a scelerisque lectus ut, magna semper curabitur neque luctus et sodales, porttitor sollicitudin laoreet donec nam mattis.
</p>
  </div>
</div>

＆＃13;

Answer 4

您可以使用＆＃34; display：flex＆＃34;对于相等宽度/高度的列。

这是完整描述＆＃34; display：flex＆＃34;的链接。： -

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使A列的高度等于B列

4 个答案: