制作具有两列高度相同且其中一列可滚动的 HTML

Question

我有一个由一行和两列组成的 HTML 表格（换句话说，只有两个单元格）。这个想法是让两列（即两个单元格）具有相等的高度，这 - 至少对我来说 - 如果使用浮动或 flexbox 证明是不平凡的，因此我求助于 HTML 表格。

左侧单元格（列）动态填充内容，因此事先不知道其高度。右侧单元格（列）也是动态填充的（实际上是 Facebook 提要），但其高度应适应（即始终等于）左侧列的高度。但是这个右栏也应该是可滚动的，这意味着用户可以通过使用该栏自己的滚动条来阅读其所有内容。

所以关键是要让屏幕上显示的右列高度适应左列的高度，同时使右列（但不是左列）可滚动。

默认情况下，右列实际上与左列具有相同的高度[除了边框落在单元格之外的烦人事实，但我们现在先把它放在一边]。但是一旦右栏的内容变得太大而无法容纳，问题就开始了。我可以设置“溢出-y：隐藏；”对于右列内的 content-div，这将强制执行相等的高度，但显然这样右列将不可滚动（溢出的内容将被简单地切断）。 [设置“溢出-y：隐藏；”到表格单元格本身，而不是其中包含的 div，似乎没有做任何事情，这实际上是有道理的，因为溢出的是 div 而不是表格单元格。]

相反，如果我设置“溢出-y：滚动；”我确实得到了所需的滚动条，但事实证明，这并不能强制等高：我得到了一个无用的滚动条，而列变得如此之高以至于能够一次显示所有内容。

因此，问题是：如何获得相等的高度和滚动条？

我也尝试过“height: auto;”和“身高：100%；”，但据我所知，似乎都没有帮助......

这是当前情况的屏幕截图：

_{（来源：test2468.nl）}

您可以看到右列的滚动条（在页面滚动条的左侧），但您也可以看到该列变得比左列高。

代码很简单：

<table>
<col width="60%">
<col width="38.7%">

<tr>

<td>
   [... Fill the left column/cell with dynamic content ]
</td>

<td id="fb-td" style="vertical-align: top;">
   <div id="fp2-rechts">
      <div class="faceb" id="fb-berichten2">
         <h3 id="fb-kop2">OP FACE-<br />BOOK</h3>
         <?php echo do_shortcode('[custom-facebook-feed id="168766623258787"  
         num=16]');   ?>
      </div>
   </div>
</td>

</tr>
</table>      

如您所见，右侧表格单元格中有两个 wrapper-div，可能是一对多的，但这似乎与这里无关。

谢谢。

Answer 1

这是使用 CSS 的解决方案：

table {
  position: relative;
}

td {
  background: red;
  width: 200px;
}

.column2>div {
  height: 100%;
  overflow: auto;
  position: absolute;
  top: 0;
  width: 200px;
}

<table>
  <tr>
    <td class="column1">
      <div> a<br> a<br> a<br> </div>
    </td>
    <td class="column2">
      <div> b<br> b<br> b<br> b<br> b<br> b<br> </div>
    </td>
  </tr>
</table>

Answer 2

这样试试

var maxHeight = 0;

$("div").each(function(){
  if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);