estilos - tablas en html5

Haga un HTML con dos columnas de igual altura y una de ellas desplazable

Question

Tengo una tabla HTML que consta de una fila y dos columnas (en otras palabras, solo dos celdas). La idea era hacer que las dos columnas (es decir, las dos celdas) tuvieran la misma altura, lo que, al menos para mí, resultó no ser trivial si se usaba floats o flexbox, de ahí que recurriera a una tabla HTML.

La celda izquierda (columna) está llena de contenido de forma dinámica, por lo tanto, su altura no se conoce de antemano. La celda (columna) correcta también se llena dinámicamente (en realidad, una fuente de Facebook), pero su altura debe adaptarse (es decir, siempre debe ser igual a) a la altura de la columna de la izquierda. PERO esta columna de la derecha también debe ser desplazable, lo que significa que el usuario puede leer todo su contenido simplemente mediante el uso de la barra de desplazamiento de la columna.

Entonces, el punto es hacer que la altura de la columna de la derecha, tal como se muestra en la pantalla, se adapte a la de la columna de la izquierda, mientras que también hace que la columna de la derecha (pero no la columna de la izquierda) se pueda desplazar.

Por defecto, la columna de la derecha tiene, de hecho, la misma altura que la columna de la izquierda [aparte del hecho molesto de que los bordes caen fuera de la celda, pero dejemos eso de lado por el momento]. Pero los problemas comienzan una vez que el contenido de la columna derecha se vuelve demasiado grande para caber. Podría establecer "overflow-y: hidden;" para el contenido-div dentro de la columna de la derecha, que impondría la misma altura, pero obviamente de esa manera la columna de la derecha no sería desplazable (el contenido rebosante simplemente se cortaría). [Establecer "overflow-y: hidden;" a la celda de la tabla en sí, a diferencia de la div que contiene, no parece hacer nada, lo que de hecho tiene algún sentido, ya que es la div y no la celda de la mesa la que se desborda]

Por el contrario, si configuro "overflow-y: scroll;" Obtengo la barra de desplazamiento deseada, pero como resultado, esto NO impone la misma altura: obtengo una barra de desplazamiento inútil, mientras que la columna llega a ser tan alta como para poder mostrar todo el contenido de una vez.

La pregunta es por lo tanto: ¿Cómo obtengo la misma altura Y una barra de desplazamiento?

También he experimentado con "altura: auto;" y "altura: 100%;", pero ninguno parece ayudar, por lo que pude ver ...

Aquí hay una captura de pantalla de la situación actual:

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

Puede ver la barra de desplazamiento de la columna derecha (a la izquierda de la barra de desplazamiento de la página ), pero también puede ver que esta columna se vuelve más alta que la columna de la izquierda.

El código tal como está es bastante 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> 

Como puede ver, hay dos wrappers-div dentro de la celda de la tabla derecha, que pueden ser uno a muchos, pero esto no parece relevante aquí.

Gracias.

Answer 1

Aquí está la solución que usa CSS:

Manifestación

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>

Answer 2

Prueba así

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