创建一个包含两列相等高度的HTML，其中一列可滚动 [英] Make a HTML with two columns of equal height and one of them scrollable

问题描述

我有一个HTML表格，包含一行和两列（换句话说，只有两个单元格）。这个想法是使两列（即两个单元格）具有相等的高度，至少对于我来说，如果使用浮动或flexbox，这显然是不平凡的，因此为什么我诉诸一个HTML表。 p>

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

所以关键是有正确的列高度，如屏幕上所示，适应左列的高度，同时也使右列（但不是左列）可滚动。

默认情况下，右列实际上等于左列的高度[除了讨厌的事实，边界落在单元格之外，但让我们离开现在]。但是，一旦正确的列的内容变得太大而不适合，问题就开始了。我可以设置overflow-y：hidden;对于右列中的内容div，这将强制相等的高度，但显然这样，右列不会是可滚动的（溢出的内容将被简单地切断）。 [设置overflow-y：hidden;到表单元格本身，而不是其中包含的div，似乎没有做任何事情，这实际上有一些意义，因为它是div，而不是表单元格溢出。]

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

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

我还试验了height：auto ;和height：100％;，但似乎没有帮助，只要我能告诉...

这里是一个屏幕截图的当前情况： / p>

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

您可以看到右栏的滚动条（位于 page scrollbar），但您也可以看到此列变得比左栏高。

代码很简单： / p>

 < table> 
< col width =60％> 
< col width =38.7％> 
 
< tr> 
 
< td> 
 [...用动态内容填充左列/单元格] 
< / td> 
 
< td id =fb-tdstyle =vertical-align：top;> 
< div id =fp2-rechts> 
< div class =facebid =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，

解决方案

很多，但这在这里似乎并不相关。

<

以下是使用CSS的解决方案：

演示

CSS：

  table {
 position：relative; 
} 
 
 td {
 background：red; 
 width：200px; 
} 
 
 .column2> div {
 height：100％; 
 overflow：auto; 
 position：absolute; 
 top：0; 
 width：200px; 
} 
  

HTML：

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

I have a HTML-table consisting of one row and two columns (in other words, just two cells). The idea was to make the two columns (i.e. the two cells) have equal height, which - at least for me - turned out to be non-trivial if using floats or flexbox, hence why I resorted to a HTML-table.

The left cell (column) is filled with content dynamically, hence its height is not known beforehand. The right cell (column) is also filled dynamically (actually a Facebook feed), but its height should adapt to (i.e. always be equal to) the height of the left column. BUT this right column should ALSO be scrollable, meaning that the user can read all its content simply by using the column's own scrollbar.

So the point is to have the right column's height, as displayed on the screen, adapt to that of the left column, while also making the right column (but not the left column) scrollable.

By default, the right column has in fact equal height to the left column [apart from the annoying fact that the borders fall outside the cell, but let's leave that aside for now]. But the problems start once the right column's content becomes too big to fit. I could set "overflow-y: hidden;" for the content-div inside the right column, which would enforce equal height, but obviously that way the right column would not be scrollable (overflowing content would simply be cut off). [Set "overflow-y: hidden;" to the table cell itself, as opposed to the div contained in it, doesn't seem to do anything, which actually makes some sense, since it's the div and not the table-cell that overflows.]

Conversely, if I set "overflow-y: scroll;" I do get the desired scrollbar, but as it turns out, this does NOT enforce equal height: I get a useless scrollbar, while the column becomes so high as to be able to display all the content at once anyway.

Question is therefore: How do I get both equal height AND a scrollbar?

I've also experimented with "height: auto;" and "height: 100%; ", but neither seem to help, as far as I could tell...

Here is a screen shot of the current situation:

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

You can see the right column's scrollbar (to the left of the page scrollbar), but you can also see that this column becomes higher than the left column.

The code as-is is quite simple:

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

As you see, there are two wrapper-div's inside the right table cell, which may be one to many, but this doesn't seem relevant here.

Thanks.

解决方案

Here is the solution using CSS:

Demo

CSS:

table {
    position: relative;
}

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

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

HTML:

<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，其中一列可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！