使页面高度达到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％？

回答

相关问题