vertical - zone de texte avec scrollbar html




Faire un HTML avec deux colonnes de hauteur égale et l'un d'entre eux scrollable (2)

J'ai une table HTML composée d'une ligne et deux colonnes (en d'autres termes, seulement deux cellules). L'idée était de faire en sorte que les deux colonnes (les deux cellules) aient la même hauteur, ce qui - du moins pour moi - s'est avéré non trivial si on utilisait des floats ou des flexbox, d'où le recours à une table HTML.

La cellule de gauche (colonne) est remplie dynamiquement de contenu, donc sa hauteur n'est pas connue à l'avance. La cellule droite (colonne) est également remplie dynamiquement (en fait un flux Facebook), mais sa hauteur doit s'adapter à (c'est-à-dire être toujours égale à) la hauteur de la colonne de gauche. MAIS cette colonne de droite doit également être scrollable, ce qui signifie que l'utilisateur peut lire tout son contenu simplement en utilisant la barre de défilement de la colonne.

Le point est donc que la hauteur de la colonne de droite, telle qu'affichée à l'écran, s'adapte à celle de la colonne de gauche, tout en faisant défiler la colonne de droite (mais pas la colonne de gauche).

Par défaut, la colonne de droite a en fait une hauteur égale à la colonne de gauche [à part le fait que les frontières tombent en dehors de la cellule, mais laissons cela de côté pour le moment]. Mais les problèmes commencent une fois que le contenu de la colonne de droite devient trop grand pour s'adapter. Je pourrais définir "overflow-y: hidden;" pour le contenu-div à l'intérieur de la colonne de droite, qui imposerait une hauteur égale, mais évidemment, la colonne de droite ne serait pas défilable (le contenu débordant serait simplement coupé). [Définir "overflow-y: hidden;" à la cellule de table elle-même, par opposition à la div contenue dans elle, ne semble pas faire quoi que ce soit, ce qui a du sens, puisque c'est la div et non la cellule de table qui déborde.]

Inversement, si je mets "overflow-y: scroll;" J'obtiens la barre de défilement désirée, mais comme cela s'avère, cela n'impose PAS une hauteur égale: je reçois une barre de défilement inutile, alors que la colonne devient si haute qu'elle est capable d'afficher tout le contenu à la fois.

La question est donc: Comment puis-je obtenir à la fois une hauteur égale ET une barre de défilement?

J'ai aussi expérimenté avec "height: auto"; et "hauteur: 100%;", mais aucun ne semble aider, autant que je pourrais dire ...

Voici une capture d'écran de la situation actuelle:

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

Vous pouvez voir la barre de défilement de la colonne de droite (à gauche de la barre de défilement de la page ), mais vous pouvez également voir que cette colonne devient plus haute que la colonne de gauche.

Le code tel qu'il est est assez 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>      

Comme vous le voyez, il y a deux wrapper-div à l'intérieur de la cellule du tableau de droite, ce qui peut être un à plusieurs, mais cela ne semble pas pertinent ici.

Merci.


Essayez comme ça

var maxHeight = 0;

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

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

Voici la solution utilisant CSS:

Démo

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>




scrollable