Question

我有两个div彼此相邻。通常一个人的内容比另一个人多。我想要达到的目标是它们的高度明显相同。

我尝试使用display来实现它：table-cell;和身高：100％;但没有运气。

＆＃13;

.content {
  background-color: tomato;
  margin: 10px;
  border: 3px solid black;
  height: 100%; /* this seems to be being ignored */
}

.table {
  display: table;
  vertical-align: middle;
  /*height:100%; if I do this it will also affect height of bigger div */
}

.tr {
  display: table-row;
  vertical-align: inherit;
  height: 100%;
}

.td {
  display: table-cell;
  vertical-align: inherit;
  width: 50%;
  height: 100%;
}

html, body {
  height: 100%;
}

＆＃13;

<div class="table">
  <div class="tr">
    <div class="td">
      <div class="content">Lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of content.</div>
    </div>
    <div class="td">
      <div class="content">I wish I was the same height as my fellow div</div>
    </div>
  </div>
</div>

＆＃13;

有什么建议吗？

Answer 1

将overflow: auto添加到.content，
并从height: 100%中移除.td。

假设您希望.content的文字垂直居中，您需要向.content添加其他元素。这些样式适用于它：

.content > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

.content {
  background-color: tomato;
  margin: 10px;
  border: 3px solid black;
  height: 100%;
  overflow: auto;
}

.content > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.table {
  display: table;
  vertical-align: middle;
}

.tr {
  display: table-row;
  vertical-align: inherit;
  height: 100%;
}

.td {
  display: table-cell;
  vertical-align: inherit;
  width: 50%;
}

html, body {
  height: 100%;
}

＆＃13;

<div class="table">
  <div class="tr">
    <div class="td">
      <div class="content"><div>Lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of content.</div></div>
    </div>
    <div class="td">
      <div class="content"><div>I wish I was the same height as my fellow div</div></div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我希望我帮到你。但解决方案对我来说似乎很复杂。实际上你可以通过使用这个简单的标记和CSS来实现你想要的。适用于Safari，Chrome，Firefox，也适用于IE：

<强> HTML

<div class="content">Really long content</div>
<div class="content">Short content</div>

<强> CSS

.content {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

<强>演示

AngularJS Eclipse

Answer 3

修改

Removed previous answer as it seem to only work in ff.

<强>更新
此snipplet适用于所有主流浏览器：https://jsfiddle.net/4k4653yL/3/

Answer 4

＆＃13;

                  foo f g n = f (g n) /\ foo id id u = ()

＆＃13;

.content {
  background-color: tomato;
  margin: 10px;
  border: 3px solid black;
  height: 100%; /* this seems to be being ignored */
}

.table {
  display: table;
  vertical-align: middle;
height:50%;
}

.tr {
  display: table-row;
  vertical-align: inherit;
  height:100%;
}

.td {
  display: table-cell;
  vertical-align: inherit;
  width: 50%;
}

html, body {
  height: 100%;
}

＆＃13;

Answer 5

当您给出一个百分比大小时，父级需要设置该大小，所以添加

height:100%;

到body和html

CSS高度：100％无效

5 个答案: