Deux colonnes, où la deuxième colonne adapte automatiquement sa largeur

Question

Je voudrais avoir une colonne de gauche (#a) utilisant la pleine hauteur de la page, et une colonne de droite (#b) utilisant le reste de la page:

* { margin: 0; padding: 0; } 
 
#a { position: fixed; height: 100%; } 
 
#b { background-color: blue; }

<textarea id="a">hello</textarea> 
 
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>

ici, le résultat est faux: le texte dans la colonne de droite n'est pas visible.

Comment faire pour que la colonne de droite soit montrée sur la droite, et pas sous la colonne de gauche?

également:

• Hovering souris à la limite entre la droite et la colonne de gauche doit afficher un curseur de redimensionnement: quand on redimensionner la colonne de gauche horizontalement (de 0% à 100% de la largeur totale du navigateur), la colonne de droite devrait adapter en temps réel

• J'ai essayé des solutions en faisant la colonne de droite dans une boîte, mais quand je fais la colonne de gauche 0% largeur/colonne de droite 100% largeur, puis lors de l'impression de la navigateur, le navigateur ne voit que une page (et tente d'imprimer une seule page, et tente également d'imprimer la barre de défilement y, drôle!), Au lieu d'imprimer le contenu en plusieurs pages, comme d'habitude.

Answer 1

Voici une solution CSS uniquement qui repose sur la propriété d'affichage flex. Cela fournit presque toutes les fonctionnalités que vous répertoriez et suppose que la hauteur de la page est acceptable pour les deux colonnes. CSS ne permet pas seulement de faire glisser le côté d'un élément à redimensionner, à l'exception du contrôle natif sur les zones de texte disponibles dans le coin inférieur droit.

body { 
 
\t margin: 0; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
} 
 

 
.parent { 
 
\t display: flex; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.left { 
 
\t resize: horizontal; 
 
\t background: lightblue; 
 
} 
 

 
.right { 
 
\t flex: 1; 
 
\t background: coral; 
 
}

<div class="parent"> 
 
\t <textarea class="left"></textarea> 
 
\t <div class="right">asdf</div> 
 
</div>

Answer 2

Votre élément #a a position: fixed; Cela signifie qu'il COUVRE l'autre élément, qui est placé en haut à gauche, puisque l'élément positionné fixe est hors du flux de documents layout- sage.

Pour éviter cela (si vous insistez sur la position fixe), leur donner des réglages comme ci-dessous:

PS: Une question à la fois ...

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#a { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 35%; 
 
} 
 

 
#b { 
 
    position: relative; 
 
    width: 65%; 
 
    left: 35%; 
 
    background-color: blue; 
 
}

<textarea id="a">hello</textarea> 
 
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>