使 A 列的高度等于 B 列的高度

Question

我试图让网页上的 2 列具有相同的高度。列的高度未预先设置。我想要完成的是 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

因为要有滚动条，所以想不出不用JS也能实现的等等。

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

$(function(){
resize();
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="column" id="col-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula, enim non sollicitudin molestie, dolor
        diam auctor turpis, eget venenatis ligula eros nec mi. Quisque bibendum erat a magna pretium finibus.
        Suspendisse vehicula lectus felis, quis pharetra purus commodo et. Praesent nec suscipit elit. Vivamus vitae mi
        libero. Curabitur malesuada blandit velit, eget venenatis nisi malesuada ut. Praesent sollicitudin lacus quis
        elit placerat, dapibus luctus purus facilisis. Integer eget congue libero, nec euismod mauris. Duis aliquet odio
        nulla, lacinia vulputate orci tincidunt quis. Quisque magna sapien, tincidunt a suscipit sed, imperdiet non
        tellus. Mauris sagittis neque sed suscipit molestie. Suspendisse ultricies sollicitudin tortor quis maximus.
        Suspendisse condimentum facilisis sagittis. Duis quis malesuada nisi, non euismod augue. Phasellus rutrum, nunc
        ac dictum facilisis, ipsum turpis suscipit metus, id sagittis eros mauris in mi. Fusce odio purus, dignissim id
        erat eu, pellentesque vehicula nisi.
    </div>
    <div class="column" id="col-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula, enim non sollicitudin molestie, dolor
        diam auctor turpis, eget venenatis ligula eros nec mi. Quisque bibendum erat a magna pretium finibus.
        Suspendisse vehicula lectus felis, quis pharetra purus commodo et. Praesent nec suscipit elit. Vivamus vitae mi
        libero. Curabitur malesuada blandit velit, eget venenatis nisi malesuada ut. Praesent sollicitudin lacus quis
        elit placerat, dapibus luctus purus facilisis. Integer eget congue libero, nec euismod mauris. Duis aliquet odio
        nulla, lacinia vulputate orci tincidunt quis. Quisque magna sapien, tincidunt a suscipit sed, imperdiet non
        tellus. Mauris sagittis neque sed suscipit molestie. Suspendisse ultricies sollicitudin tortor quis maximus.
        Suspendisse condimentum facilisis sagittis. Duis quis malesuada nisi, non euismod augue. Phasellus rutrum, nunc
        ac dictum facilisis, ipsum turpis suscipit metus, id sagittis eros mauris in mi. Fusce odio purus, dignissim id
        erat eu, pellentesque vehicula nisi.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula, enim non sollicitudin molestie, dolor
        diam auctor turpis, eget venenatis ligula eros nec mi. Quisque bibendum erat a magna pretium finibus.
        Suspendisse vehicula lectus felis, quis pharetra purus commodo et. Praesent nec suscipit elit. Vivamus vitae mi
        libero. Curabitur malesuada blandit velit, eget venenatis nisi malesuada ut. Praesent sollicitudin lacus quis
        elit placerat, dapibus luctus purus facilisis. Integer eget congue libero, nec euismod mauris. Duis aliquet odio
        nulla, lacinia vulputate orci tincidunt quis. Quisque magna sapien, tincidunt a suscipit sed, imperdiet non
        tellus. Mauris sagittis neque sed suscipit molestie. Suspendisse ultricies sollicitudin tortor quis maximus.
        Suspendisse condimentum facilisis sagittis. Duis quis malesuada nisi, non euismod augue. Phasellus rutrum, nunc
        ac dictum facilisis, ipsum turpis suscipit metus, id sagittis eros mauris in mi. Fusce odio purus, dignissim id
        erat eu, pellentesque vehicula nisi.
    </div>
</div>

Answer 2

您需要使用 javaScript，因为高度未预先确定

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

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

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

.

Answer 3

您可以使用 "display:flex" 来获得相等的 width/height 列。

这里是 link 的完整描述 "display:flex" :-

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

Answer 4

在 HTML 中稍作改动，这可以通过 Flexbox 实现。

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

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

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

使 A 列的高度等于 B 列的高度

Make Column A equal to Column B in height

css

multiple-columns

twitter-bootstrap