Comment créer une mise en page multi-colonnes basée sur AdminLTE qui se développe avec le contenu de la barre latérale?

Question

je la disposition suivante qui est une altération du AdminLTE boxed layout template:

HTML

<div class="wrapper"> 
    <div class="header"> 
    Header 
    </div> 
    <div class="leftbar"> 
    Left bar 
    </div> 
    <div class="content-wrapper"> 
    <div class="content"> 
     Content 
    </div> 
    <div class="content-rightbar"> 
     Right bar 
    </div> 
    </div> 
    <div class="footer"> 
    Footer 
    </div> 
</div> 

CSS

body { 
    background-color: lightgray; 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

.wrapper { 
    overflow: hidden; 
    background-color: #222d32; 
    max-width: 600px; 
    margin: 0 auto; 
    min-height: 100%; 
    position: relative; 
    height: 100%; 
} 

.header { 
    position: relative; 
    height: 30px; 
    z-index: 1030; 
    color: white; 
    background-color: #367fa9; 
    padding: 2px; 
} 

.leftbar { 
    color: white; 
    background-color: #222d32; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding-top: 30px; 
    min-height: 100%; 
    width: 100px; 
    z-index: 810; 
    padding: 40px 10px 10px 10px; 
} 

.content-wrapper { 
    margin-right: 100px; 
    margin-left: 100px; 
    background-color: #ecf0f5; 
    z-index: 800; 
} 

.content { 
    min-height: 200px; 
    padding: 10px; 
    margin-right: auto; 
    margin-left: auto; 
} 

.content-rightbar { 
    right: 0; 
    min-height: calc(100% - 30px); 
    position: absolute; 
    background: #f9fafc; 
    border-left: 1px solid #d2d6de; 
    z-index: 1010; 
    top: 0; 
    width: 100px; 
    text-align: right; 
    padding: 40px 10px 0 10px; 
} 

.footer { 
    background: #fff; 
    border-top: 1px solid #d2d6de; 
    margin-left: 100px; 
    z-index: 9999; 
    height: 30px; 
    padding: 2px; 
} 

Codepen

https://codepen.io/kspearrin/pen/QqBrpB

Résultat

Problèmes

Cela ressemble exactement comment je voudrais qu'il avec un problème:

• Débordant le leftbar et content-rightbar avec le contenu provoque le contenu débordés à cacher. La hauteur est uniquement déterminée par le contenu à l'intérieur content.

Exemples:

Question

Comment puis-je faire en sorte que la soit toute la hauteur de mise en page dans les body augmente avec la teneur du content , leftbar, et content-rightbar - OU - que le leftbar et content-rightbar faire défiler avec leur contenu débordant?

Answer 1

Vous avez défini votre débordement sur caché pour votre wrapper, vous pouvez simplement le définir sur "auto" ou "scroll" pour afficher le contenu à l'intérieur de votre conteneur. Seulement alors, il faudra plus de temps que votre conteneur de contenu, puis il prendra toute la largeur, car il n'y a pas d'autres éléments là.

En fait, je vous recommande de reconsidérer l'utilisation de la boîte flexible car elle gardera vos éléments à la même hauteur et évitera tous les problèmes de débordement que vous avez maintenant. Si vous n'êtes pas familier avec les boîtes flexibles, je peux vous recommander https://css-tricks.com/snippets/css/a-guide-to-flexbox/ à la fin, vous trouverez un exemple pour une disposition multi-colonnes qui comprend tous les éléments dont vous avez besoin pour votre projet.

Autre conseil: Vous pouvez utiliser une liste non ordonnée pour vos éléments de la barre latérale, car c'est la manière la plus courante de le faire.

ul {list-style: none;}

<ul> 
 
    <li>Left bar</li> 
 
    <li>Left bar</li> 
 
    <li>Left bar</li> 
 
</ul>