使柔性物品具有100％的高度和溢出：滚动

我想让柔性物品占据剩余高度的100％并显示overflow: scroll。使柔性物品具有100％的高度和溢出：滚动

看起来问题来自于我的#userList，它占用了窗口高度的100％，并且没有占用剩余空间。

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
    margin:0px; 
 
} 
 
.wrapper { 
 
    display: block; 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: row;/
 
} 
 

 
#chatContainer { 
 
\t background: orange; 
 
\t width: calc(100% - 350px); 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 
#tabs{ 
 
\t background-color: red; 
 
\t flex: 1 1 0px; 
 
\t display: flex; \t 
 
} 
 
#usersContainer { 
 
    flex: 1 1 0; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
#userListWrapper { 
 
\t background-color:pink; 
 
\t flex: 1 1 auto; 
 
\t display:flex; 
 
} 
 
#userList { 
 
    -webkit-flex: 1 1 auto; 
 
    overflow: auto; 
 
    min-height: 0px; 
 
    height:100%; 
 

 
} 
 
.input { 
 
\t background-color: #49FFFC; 
 
}

<div class="wrapper"> 
 
    <div id="chatContainer"> 
 
     <div id="webcamContainer">webcam</div> 
 
     <div id="tabs">tabs here</div> 
 
     <div id="footer" style="background-color:#A0C8FF;height:50px">footer</div> 
 
    </div> 
 
    <div id="usersContainer" style="background-color:blue"> 
 
     
 
     <div class="input">searchInput1</div> 
 
     <div class="input">searchInput2</div> 
 
    
 
      <div id="userList"> 
 
       user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br> 
 
       user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br> 
 
       user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br> 
 
       user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br> 
 
      </div> 
 
    
 
    </div> 
 
    </div>

https://jsfiddle.net/jpo31gq9/

来源

2016-02-08 yarek

这是你想要的吗？ https://jsfiddle.net/k6Lz64Lz/ –

是的!!!你是个天才！你能解释我做了什么吗？ – yarek

您所遇到的主要问题是违反关于CSS中的百分比高度的规则。

基本上，当使用百分比高度时，您必须始终指定父元素的高度。否则，具有百分比高度的元素没有参照系，并且高度计算为auto（内容的高度）。

从规格：

CSS height property

个
指定的百分比高度。百分比是根据生成的包含框的块的高度来计算的。如果未明确指定包含块的高度，并且此元素没有绝对定位，则该值计算为“auto”。

auto
高度取决于其他属性的值。

_{来源：https://www.w3.org/TR/CSS21/visudet.html#propdef-height}

所以，如果你打算使用百分比高度，您需要指定每个父元素的高度达根元素（html）或最多一个固定的高度声明（例如height: 250px）。你的CSS中有body { min-height: 100%; }。但是，父母没有指定height（html）。

在你的代码下面的父元素缺少一个height声明：

html
body（min-height不计）
.wrapper
#chatContainer

通过以下调整，您的布局可以正常工作。

html { height: 100%; }    /* NEW */ 

body { 
    display: flex; 
    flex-direction: column; 
    /* min-height: 100%; */ 
    margin: 0px; 
    height: 100%;     /* NEW */ 
} 

.wrapper { 
    display: block; 
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: row; 
    height: 100%;     /* NEW */ 
} 

#chatContainer { 
    background: orange; 
    width: calc(100% - 350px); 
    display: flex; 
    flex-direction: column; 
    height: 100%;     /* NEW */ 
}

Revised Fiddle

这也是值得当前的浏览器中提一些变化。

百分比高地：铬/ Safari浏览器火狐VS/IE

虽然传统的实现百分比高度的使用height属性的值，最近一些浏览器已经扩大了范围。

正如以下文章所证明的那样，Firefox和IE现在也使用flex高度来解析子元素的高度百分比。

底线：根据父母的height属性的值，Chrome和Safari的决心百分比高度。 Firefox和IE11/Edge使用家长计算出的弹性高度。

就目前而言，最简单的跨浏览器解决这一问题将是，在我看来，用全线height属性百分比高度。

来源

2016-02-09 00:30:40

使柔性物品具有100％的高度和溢出：滚动

回答

相关问题