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 contentcontenu 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 contentdiv .
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 contentzone pour qu'elle défile indépendamment, tout en laissant ses enfants s'étendre au-delà de la contenthauteur de la boîte?
css
layout
multiple-columns
flexbox
Joseph Silber
la source
la source
Je viens de résoudre ce problème très élégamment après beaucoup d'essais et d'erreurs.
Consultez mon article de blog: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
Fondamentalement, pour faire défiler une cellule flexbox, vous devez faire tous ses parents
overflow: hidden;, ou elle ignorera simplement vos paramètres de débordement et agrandira le parent à la place.la source
Travailler
position:absolute;avecflex:Positionnez l'élément flexible avec
position: relative. Puis à l'intérieur, ajoutez un autre<div>élément avec:Cela étend l'élément aux limites de son parent positionné par rapport, mais ne permet pas de l'étendre. À l'intérieur,
overflow: auto;fonctionnera alors comme prévu.Bonne chance...
la source
box-sizing: border-boxplace, mais cela peut être plus complexe pour certains contrôles tiers).Un peu tard mais cela pourrait aider: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
Fondamentalement, vous devez mettre
html,bodymettreheight: 100%;et envelopper tout votre contenu dans un<div class="wrap"> <!-- content --> </div>CSS:
A travaillé pour moi. J'espère que ça aide
la source
Ajoute ça:
à la règle pour
.content {}. Cela le corrige dans votre stylo pour moi, au moins (dans Firefox et Chrome).Par défaut,
.contenthasalign-items: stretch, ce qui lui permet de dimensionner tous ses enfants à hauteur automatique pour correspondre à sa propre hauteur, par http://dev.w3.org/csswg/css-flexbox/#algo-stretch . En revanche, la valeurflex-startpermet aux enfants de calculer leurs propres hauteurs et de s'aligner sur son bord de départ (et de déborder, et de déclencher une barre de défilement).la source
Un problème que j'ai rencontré est que pour avoir une barre de défilement, un élément doit être spécifié en hauteur (et non en%).
L'astuce consiste à imbriquer un autre ensemble de divs dans chaque colonne et à définir l'affichage du parent de la colonne sur flex avec flex-direction: column.
Et voici le html:
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
la source
La solution à ce problème consiste simplement à ajouter
overflow: auto;au .content pour rendre le wrapper de contenu défilable.De plus, il y a des circonstances qui se produisent avec l'encapsuleur
overflowedFlexbox et le contenu défilable comme ce codepen .La solution consiste à ajouter
overflow: hidden (or auto);au parent de l'encapsuleur (défini avec overflow: auto;) autour de grands contenus.la source