制作一个 HTML 两列等高，其中一列可滚动

Question

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

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

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

默认情况下，右栏的高度实际上与左栏的高度相同[除了边界落在单元格之外这一烦人的事实，但让我们暂时将其搁置一旁]。但是，一旦右侧栏的内容变得太大而无法容纳，问题就开始了。我可以为右列中的内容设置 "overflow-y: hidden;"-div，这将强制等高，但显然这样右列将不可滚动（溢出的内容将被简单地切断）。 [将 "overflow-y: hidden;" 设置为 table 单元格本身，与其中包含的 div 相对，似乎没有做任何事情，这实际上是有道理的，因为它是 div 而不是溢出的 table-cell。]

相反，如果我设置 "overflow-y: scroll;"，我确实得到了想要的滚动条，但事实证明，这并没有强制实施等高：我得到了一个无用的滚动条，而列变得如此之高以至于无论如何都能一次显示所有内容。

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

我也尝试过 "height: auto;" 和 "height: 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>

如您所见，右侧 table 单元格内有两个 wrapper-div，它们可能是一对多的，但这在这里似乎不相关。

谢谢。

Answer 1

试试看

var maxHeight = 0;

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

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

Answer 2

这是使用 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>

制作一个 HTML 两列等高，其中一列可滚动

Make a HTML with two columns of equal height and one of them scrollable

html

css

html-table

scrollable