Hier ist der Code, mit dem ich das obige Layout erreiche:
.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>Ich habe den für das Styling verwendeten Code weggelassen. Sie können alles im Stift sehen .
Das Obige funktioniert, aber wenn der contentInhalt des Bereichs überläuft, wird die gesamte Seite gescrollt. Ich möchte nur, dass der Inhaltsbereich selbst gescrollt wird, also habe ich overflow: autodem contentdiv hinzugefügt .
Das Problem dabei ist nun, dass die Spalten selbst nicht über die Höhe ihrer Eltern hinausragen, sodass auch dort die Ränder abgeschnitten werden.
Hier ist der Stift, der das Bildlaufproblem zeigt .
Wie kann ich festlegen, dass der contentBereich unabhängig gescrollt wird, während die untergeordneten Elemente weiterhin über die contentHöhe der Box hinausragen ?
css
layout
multiple-columns
flexbox
Joseph Silber
quelle
quelle
Ich habe dieses Problem gerade nach vielen Versuchen und Irrtümern sehr elegant gelöst.
Schauen Sie sich meinen Blog-Beitrag an: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
Im Grunde genommen , um eine Flexbox Zelle scrollbaren zu machen, müssen Sie all seinen machen Eltern
overflow: hidden;, oder es wird nur Ihre Überlauf - Einstellungen ignorieren und die Eltern statt größer.quelle
Arbeiten mit
position:absolute;zusammen mitflex:Positionieren Sie das Flex-Element mit
position: relative. Fügen Sie dann ein weiteres<div>Element hinzu mit:Dadurch wird das Element bis an die Grenzen seines relativ positionierten übergeordneten Elements erweitert, es kann jedoch nicht erweitert werden. Innen
overflow: auto;funktioniert dann wie erwartet.Viel Glück...
quelle
box-sizing: border-boxstattdessen festlegen, aber das kann für bestimmte Steuerelemente von Drittanbietern komplexer sein.)Ein bisschen spät, aber das könnte helfen: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
Grundsätzlich müssen Sie setzen
html,bodyzuheight: 100%;und wickeln Sie alle Ihre Inhalte in ein<div class="wrap"> <!-- content --> </div>CSS:
Hat für mich gearbeitet. Ich hoffe es hilft
quelle
Füge das hinzu:
zur Regel für
.content {}. Das behebt es zumindest für mich in Ihrem Stift (sowohl in Firefox als auch in Chrome).Standardmäßig hat
.contenthasalign-items: stretch, wodurch alle untergeordneten Elemente mit automatischer Höhe entsprechend ihrer eigenen Größe gemäß http://dev.w3.org/csswg/css-flexbox/#algo-stretch angepasst werden . Im Gegensatz dazuflex-startkönnen die Kinder mit dem Wert ihre eigenen Höhen berechnen und sich an der Startkante ausrichten (und überlaufen und eine Bildlaufleiste auslösen).quelle
Ein Problem, auf das ich gestoßen bin, ist, dass für eine Bildlaufleiste für ein Element eine Höhe angegeben werden muss (und nicht als%).
Der Trick besteht darin, einen weiteren Satz von Divs in jeder Spalte zu verschachteln und die Anzeige der übergeordneten Spalte so einzustellen, dass sie mit der Flex-Richtung: Spalte gebogen wird.
Und hier ist das HTML:
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
quelle
Die Lösung für dieses Problem besteht
overflow: auto;darin, den Inhalt hinzuzufügen , um den Inhalts-Wrapper scrollbar zu machen.Darüber hinaus treten Umstände zusammen mit dem Flexbox-Wrapper und
overflowedscrollbaren Inhalten wie diesem Codepen auf .Die Lösung besteht darin
overflow: hidden (or auto);, dem übergeordneten Element des Wrappers (festgelegt mit Überlauf: auto;) große Inhalte hinzuzufügen .quelle