Voici le code que j'utilise pour réaliser la disposition ci-dessus:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>
J'ai omis le code utilisé pour le style. Vous pouvez tout voir dans le stylo .
Ce qui précède fonctionne, mais lorsque le content
contenu de la zone déborde, cela fait défiler la page entière. Je veux seulement que la zone de contenu défile, alors j'ai ajouté overflow: auto
à la content
div .
Le problème avec cela maintenant est que les colonnes elles-mêmes ne s'étendent pas au-delà de la hauteur de leurs parents, donc les bordures y sont également coupées.
Voici le stylo montrant le problème de défilement .
Comment puis-je configurer la content
zone pour qu'elle défile indépendamment, tout en laissant ses enfants s'étendre au-delà de la content
hauteur de la boîte?