Question

我有一个由一行和两列组成的HTML表（换句话说，只有两个单元格）。我的想法是让两列（即两个单元格）具有相同的高度，如果使用浮点数或弹性框，这对于我来说至少是非常重要的，因此我采用了HTML表格。

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

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

默认情况下，右栏实际上与左栏的高度相等[除了边框落在单元格之外的烦人事实，但让我们暂时搁置一旁]。但是，一旦右栏的内容变得太大而无法适应，问题就会出现。我可以设置“overflow-y：hidden;”对于右列内的content-div，它会强制相同的高度，但很明显，右列不可滚动（溢出的内容将被简单地切断）。 [设置“溢出-y：隐藏;”对于表格单元本身而言，与其中包含的div相反，似乎没有做任何事情，这实际上是有道理的，因为它是div而不是溢出的表格单元格。]

相反，如果我设置“overflow-y：scroll;”我得到了所需的滚动条，但事实证明，这并没有强制相同的高度：我得到一个无用的滚动条，而列变得如此之高，以至于无论如何都能够立即显示所有内容。

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

我也尝试过“身高：自动;”和“身高：100％;”，但据我所知，似乎都没有帮助......

以下是当前情况的屏幕截图：

http://www.test2468.nl/wptest/Screenshot%20(3151).png

您可以看到右列的滚动条（位于页面滚动条的左侧），但您也可以看到此列高于左列。

代码原样非常简单：

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

如你所见，右表格单元格中有两个包装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，其中一列可滚动

2 个答案: