我想要一个flex项目采取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 {
background: orange;
width: calc(100% - 350px);
display: flex;
flex-direction: column;
}
#tabs{
background-color: red;
flex: 1 1 0px;
display: flex;
}
#usersContainer {
flex: 1 1 0;
display:flex;
flex-direction:column;
}
#userListWrapper {
background-color:pink;
flex: 1 1 auto;
display:flex;
}
#userList {
-webkit-flex: 1 1 auto;
overflow: auto;
min-height: 0px;
height:100%;
}
.input {
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://jsfidle.net/jpo31gq9/
您遇到的主要问题是违反了CSS中控制高度百分比的规则。
基本上,在使用百分比高度时,必须始终指定父元素的高度。否则,具有百分比高度的元素没有参考框架,高度计算为auto
(内容的高度)。
根据规范:
来源:https://www.w3.org/tr/css21/visudet.html#propdef-height
因此,如果您计划使用百分比高度,则需要在每个父元素上指定一个高度,直到根元素(HTML
)或一个固定的高度声明(如height:250px
)。
在CSS中,您有body{min-height:100%;}
。但是,在父级(HTML
)上没有指定height
。
代码中的下列父元素缺少height
声明:
HTML
车身
(最小高度
不计算在内).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 */
}
百分比高度:Chrome/Safari vs Firefox/IE
虽然百分比高度的传统实现使用height
属性的值,但最近一些浏览器已经拓宽了范围。
正如下面的帖子所证明的那样,Firefox和IE现在也在使用flex heights来解决子元素的百分比高度。
就目前而言,在我看来,解决这个问题的最简单的跨浏览器解决方案是全面使用height
属性来处理百分比高度。
已解决的检查答案如下... 因此,我正在尝试为我的Android应用程序创建一个评论功能,我想在recyclerview中显示评论,然后在recyclerview下面有一个按钮和textview来添加评论。我想让recyclerview有一定的高度,如果有很多评论,它就可以滚动,因为我不想让用户不得不向下滚动屏幕才能找到add按钮。 我不能让它工作,所以我想知道是否有人有这个问题。 我的XML(滚
我试图理解我的意外行为: 容器中有一个最大高度为100%的元素,该容器也使用了最大高度,但意外的是,子元素溢出了父元素: 测试用例:http://jsfiddle.net/bq4Wu/16/ 但是,如果为父级指定了明确的高度,则这是固定的: 测试用例:http://jsfiddle.net/bq4Wu/17/ 有人知道第一个例子中孩子为什么不尊重父母的最大身高吗?为什么需要明确的高度?
问题是当我将页面收缩到某个点时, 元素的顶部溢出,奇怪的是底部没有溢出。说清楚一点,我不想让这两个都溢出来。 这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1 您将看到,当您运行它并将结果窗口缩小到大约350px时, 元素开始溢出。 我已经尝试从.main-content规则中删除我的line-height和font-size属性,但它仍然溢出。
我目前正在为一家公司做一个移动登陆页面。这是一个真正基本的布局,但在标题下方有一个产品的图像,它将永远是100%的宽度(设计显示它总是从边到边)。根据屏幕的宽度,图像的高度显然会相应地调整。我最初用一个img(CSS宽度为100%),它工作得很好,但我意识到我希望使用媒体查询来为基于不同分辨率的不同图像提供服务-例如,同一图像的小、中、大版本。我知道你不能用CSS改变img src,所以我想我应该
我正在创建一个1024宽框架的新网站。我需要100%宽度的顶部页眉,页眉,菜单和页脚的100%宽度。但我需要1024 px宽度的内容占位符。我正在尝试设置100%的高度内容。例如,如果内容占位符的内容较少,则页脚需要贴在页面底部;如果内容占位符的内容较多,则需要滚动整个页面。下面是代码示例: 我需要设置主要内容占位符的绝对位置,因为jquery滚动菜单。如果我设置了相对位置,那么在访问菜单时,主内
问题内容: 为什么CSS属性不能在中正常运行,而效果很好? 从CSS规范1,2,我不明白为什么。 问题答案: 我从这里得到了东西! 安德鲁·费多纽克(Andrew Fedoniouk)写道: 这实际上是我的问题:“一个技术原因是溢出属性不适用于表。” -为什么?这是什么原因 我不是专家,但是我相信这只是为了与旧表行为向后兼容。您可以在规范中检查“自动”表布局算法。我很确定该布局算法与溢出属性不兼容