Höhe 100% der Seite machen?

Ich experimentiere mit Flexbox ein wenig und ich frage mich, ob es eine Eigenschaft gibt, wie flex: 1, die die Höhe eines Elements 100% der Seitenhöhe ohne Scrollbalken zum Scrollen nach unten ermöglicht. Wenn ich die Größe ändern würde, würde es bleiben und keine Bildlaufleisten hinzufügen. Ich hoffe, Sie verstehen. Ich habe eine Fiddle mit einer Höhe von nur 1000px hinzugefügt und ich hatte gehofft, wenn jemand von euch/Mädchen wissen würde, wie man es auf 100% der Seite setzt.Höhe 100% der Seite machen?

https://jsfiddle.net/mL594h73/

HTML:

<div class="wrapper"> 
    <div class="box-1"></div> 
    <div class="box-2"></div> 
</div>

CSS:

.wrapper { 
display: flex; 
} 

.box-1 { 
flex: 1; 
width: 200px; 
height: 1000px; 
background-color`enter code here`: #2ABB9B; 
} 

.box-2 { 
flex: 1; 
width: 200px; 
height: 1000px; 
background-color: #16A085; 
}

Quelle

2017-04-26 RogerFedFan

Verwenden VH auf dem div oder Element. 1vh = 1/100 der Höhe des Bildschirms. 100vh wäre daher 100% Bildschirmhöhe. – Korgrue

Mögliches Duplikat von [Machen Sie ein div, füllen Sie die Höhe des verbleibenden Bildschirmbereichs] (http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen- Platz) –

Verwendung height:100vh in .wrapper und entfernen Standard margin von body

body { 
 
    margin: 0 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    height: 100vh 
 
} 
 

 
.wrapper>div { 
 
    flex: 1; 
 
    width: 200px; 
 
} 
 

 
.box-1 { 
 
    background-color: #2ABB9B; 
 
} 
 

 
.box-2 { 
 
    background-color: #16A085; 
 
}

<div class="wrapper"> 
 
    <div class="box-1"></div> 
 
    <div class="box-2"></div> 
 
</div>

Quelle

2017-04-26 19:00:45 dippas

einfach den Standard-Rand aus dem Körper entfernen und min-height zu Ihren Eltern div wrapper wie folgt hinzu:

body { 
    margin: 0px; 
} 
.wrapper { 
    min-height: 100%; 
    display: flex; 
}

Quelle

2017-04-26 19:01:09

nicht genug. Sie müssen Standard-'margin' aus dem Körper entfernen – dippas

@dippas Antwort bearbeitet. Danke für die Köpfe !! –

Vielleicht eine Alternative ist es, eine'position einzustellen: absolute' height:100% zu erhalten funktioniert richtig. Sie können auch display:table für den Hauptbehälter gesetzt und display:table-cell an Containern innerhalb des Arbeits height:100%

.wrapper { 
    display:table; 
    position:absolute; 
    width:100%; 
    height:100%; 
} 

.box-1 { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    width: 200px; 
    background-color: #2ABB9B; 
} 

.box-2 { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    width: 200px; 
    background-color: #16A085; 
}

Beispiel zu passen: https://jsfiddle.net/mL594h73/1/

Quelle

2017-04-26 19:05:09 TriForce

Höhe 100% der Seite machen?

Antwort

Verwandte Themen