Bonsoir
J'ai passé la journée à essayer de faire fonctionner ce bazar, sans succès.
Quels que soient les paramètres CSS que j'affecte = ces <div>, je ne parviens pas à faire en sorte que left-panel et right-panel prennent toute la hauteur de la fenêtre et se dotent d'une barre de défilement verticale quand le contenu est trop grand.
Tout ce qui se passe quand on scrolle, c'est que l'ensemble de la page se déplace, et pas chaque "panel" séparément.
Voici le dernier état du chantier
voir https://tests.osirisnet.net/migration/tests/cadres.html
<body>
<header><h1>En-tête</h1></header>
<main>
<div id="leftPanel">
<div class="panel">
<h2>Panneau de gauche</h2>
<p>Lorem ipsum .......</p>
</div>
</div>
<div id="rightPanel">
<div class="panel">
<h2>Panneau de droite</h2>
<p>Lorem ipsum .......</p>
</div>
</div>
</main>
</body>
html, body{width:100%;height:100%;font-size:11px;font:caption;}
/* unwanted default values */
*, *:before, *:after {box-sizing: border-box;margin:0;padding:0;}
q:before, q:after, cite:before, cite:after{content:none;}
table, tr, td, th, tbody, thead{border: 0;}
h1,h2,h3,h4,h5,h6 {
display:block;
font-size:1.0em;
font-weight:bold;
}
body {display:table;position:relative;}
header {
position:fixed;
top:0;
left:0;
z-index:2000;
height:6em;
border-bottom:1px solid blue;
text-align:center;
width:100%;
padding:2em;
background-color:white;
}
h1 {line-height:100%;font-size:2em;}
h1, h2 {text-align:center;}
main {
display:table-row;
position:relative;
}
#leftPanel {
display:table-cell;
width:20%;
border-right:1px solid red;
padding-top:6em;
}
#rightPanel {
display:table-cell;
width:20%;
width:80%;
padding-top:6em;
border:1px solid green;
}
.panel {
padding:1em;
height:100%;
overflow-y:auto;
text-align:justify;
}
Il me semble invraisemblable, après plus de 10 années de polémique "anti-frame", qu'il n'y ait pas de solution simple à un problème aussi simple.
Quand on clame que quelque chose est obsolète, le moins qu'on puisse faire c'est de dire par quoi on peut le remplacer!
).
