Question

我需要有两列div s。

右列将具有可能包含1行或100行的随机内容。

左栏我想在没有javascript的情况下遵循右栏的高度。

我正在尝试这个：

<div>
   <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
   </div>
   <div style="display:inline-block; width:30%; vertical-align:top;">
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
   </div>
</div>

问题是左栏总是高度为0px，它应该显示一个与右栏相同大小的红色列。

那么如何使用div做到这一点？

修改

Rick Hitchcock的回答非常棒，但不适用于Firefox。还有其他建议吗？

Answer 1

改为使用display: table。

＆＃13;

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}

＆＃13;

<div class="wrapper">
    <div class="left">
      LEFT
    </div>
    <div class="right">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
    </div>
</div>

＆＃13;

更新

如果您真的需要内联块，我在这里将它们添加到表格单元格中，您可以根据需要设置样式。

＆＃13;

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}
.inner {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #0ff
}
.right .inner {
  background:#FF0;
}

＆＃13;

<div class="wrapper">
    <div class="left">
      <div class="inner">
        LEFT
      </div>
    </div>
    <div class="right">
      <div class="inner">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
      </div>
    </div>
</div>

＆＃13;

Answer 2

为包含div的表格显示宽度为100％。

它的孩子将表现得像表格单元格一样，并且会增长到与其行上的最高div匹配。

＆＃13;

.container {
  display: table;
  width: 100%;
}

＆＃13;

<div class="container">

    <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">

    </div>

    <div style="display:inline-block; width:30%; vertical-align:top;">

        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>

    </div>

</div>

＆＃13;

Answer 3

This文章似乎很好地解释了flexbox这方面的方法，并且对于没有flexbox的浏览器，JS有一个回退。

在Bourbon以及其他mixins和我的scss的帮助下，我一直在使用flexbox一段时间。起初看起来很混乱，但第一篇文章应该可以帮助你解决问题，同时让你的脚在flexbox中湿润。

Answer 4

尝试以下方法：

ng-click

html,body {
  height:100%;
  display:table;
} 

.left, .right {
height:100%;
width:50%;
float:left;
display:table-cell;
} 
  
.left { 
  background:red;
}

高度100％高度，内嵌显示

4 个答案: