2017-12-27 9 views
-1

Ich habe diese Struktur ... es in dem Wordpress Administrationsbereich ähnlich ist ... der Punkt ist, dass ich brauche .main die ganzen Raum in der Breite verfügbar zu nehmen und Höhe und .foot bleibt unten, während es keinen Inhalt gibt, der es senkt. Ich möchte flex verwenden, weil ich Spalten innerhalb der .main haben werde und ich brauche diese Spalten nehmen volle Höhe als auch ... Vielleicht kann jemand mir eine andere Lösung geben, aber ich kann nicht die HTML ändern, nur die CSSFlex-Layout mit einer festen Säule

.wrap { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: -100px; 
 
    background-color: #00a0d2; 
 
    width: 200px; 
 
} 
 

 
.main { 
 
    background-color: #66BB6A; 
 
    display: flex; 
 
} 
 

 
.foot { 
 
    margin-left: -200px; 
 
    background-color: #9999dd; 
 
    height: 60px; 
 
}
<div class="wrap"> 
 
    <div class="sidebar">Menu</div> 
 
    <div class="main">Content</div> 
 
    <div class="foot">Footer</div> 
 
</div>

wo das Endergebnis etwas so sein würde, thx

enter image description here

+1

was, wenn Sie mehr erklären, indem Sie ein kleines Drahtmodell über das Ergebnis hinzufügen, die Sie wollen –

Antwort

-1

Sie cou ld benutze CSS-Gitter. Es ermöglicht Platz für 2-D-Raster mit minimalem Code.

.wrap { 
 
    display: grid; 
 
    /*Make 2 columns with the first having a min width of 200px*/ 
 
    grid-template-columns: minmax(200px, 1fr) 10fr; 
 
} 
 

 
.sidebar { 
 
    background-color: #00a0d2; 
 
    /*Make sidebar take up the space of the 2 rows*/ 
 
    grid-row: 1/3; 
 
} 
 

 
.main { 
 
    background-color: #66BB6A; 
 
    /*Let the main content take up the space of view height*/ 
 
    height: 100vh; 
 
} 
 

 
.foot { 
 
    /*set footer to span the last row leaving the space for the sidebar*/ 
 
    grid-column: 2/3; 
 
    background-color: #9999dd; 
 
    height: 60px; 
 
}
<div class="wrap"> 
 
    <div class="sidebar">Menu</div> 
 
    <div class="main">Content</div> 
 
    <div class="foot">Footer</div> 
 
</div>

0

Eine Sidebar feste Position wird nicht von Flexbox betroffen sein, so können Sie Ihre Ränder anpassen müssen Raum für sie zu machen.

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    min-height: 100%; 
 
} 
 

 
.wrap { 
 
    display: flex; 
 
    flex-direction: column; /* required to establish column layout */ 
 
    min-height: 100%; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; /* full height - change if required */ 
 
    background-color: #00a0d2; 
 
    width: 200px; 
 
    opacity: .5/* for demo purposes */ 
 
    ; 
 
} 
 

 
.main { 
 
    background-color: #66BB6A; 
 
    display: flex; 
 
    flex: 1; /* take remaining height*/ 
 
    margin-left: 200px; /* width of sidebar */ 
 
} 
 

 
.foot { 
 
    margin-left: 200px; /* width of sidebar */ 
 
    background-color: #9999dd; 
 
    height: 60px; 
 
}
<div class="wrap"> 
 
    <div class="sidebar">Menu</div> 
 
    <div class="main">Content</div> 
 
    <div class="foot">Footer</div> 
 
</div>