使頁面高度達到100％？

我正在試驗Flexbox，我想知道是否有一個屬性，如flex：1，它允許元素的高度爲頁面高度的100％，而無需添加滾動條向下滾動。如果我要調整它的大小，它會粘住而不是添加滾動條。我希望你明白。我添加了一個高度設置爲1000px的小提琴，我希望你們中的任何一個能夠知道如何將它設置爲100％的頁面。使頁面高度達到100％？

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; 
}

來源

2017-04-26 RogerFedFan

使用VH的股利或元素。 1vh =屏幕高度的1/100。 100vh因此將是100％屏幕高度。 – Korgrue

[使div填充剩餘屏幕空間的高度]可能的重複（http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-空間） –

使用height:100vh在.wrapper和刪除默認margin從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>

來源

2017-04-26 19:00:45 dippas

只是從身體中刪除默認的保證金，並添加min-height到父DIV wrapper這樣的：

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

來源

2017-04-26 19:01:09

不夠。你需要從正文中刪除默認的'margin' – dippas

@dippas編輯的答案。感謝您的領袖！ –

也許還有一個辦法是設置一個'position：absolute'得到height:100%好好工作。您還可以設置display:table主容器，display:table-cell至容器內，以適應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; 
}

實例工作：https://jsfiddle.net/mL594h73/1/

來源

2017-04-26 19:05:09 TriForce

使頁面高度達到100％？

回答

相關問題