相关疑难解决方法(0)
Chrome/Safari不会填充100%高度的flex父级
我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.
我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.
- 这个问题有解决方法吗？
- 或者是否有一种不同的技术可以使所有
.item填充父级的高度与文本垂直对齐到中间？
这里的示例jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div> …推荐指数
解决办法
查看次数
高级渲染在Chrome和Firefox中有所不同
我发现如果我们设置一个块级别元素,有height:auto或height: 0~100%没有设置父级的高度具有显式值,并且其块级别子级具有底部边距,那么它将在Chrome中以不同方式计算高度,但在Firefox中则不同.对于设置的情况height: 1%:
http://codepen.io/anon/pen/BjgKMR
html {
background: pink;
}
body {
background: yellow;
}
div {
height: 1%;
}
inner {
margin-bottom: 30px;
margin-top: 20px;
}<div>
<p class="inner">block level element</p>
</div>div块的高度将计算为margin-bottom + content height of p element.我很困惑为什么height: 1%应该计算,auto因为父元素(html和body标签)没有明确设置其高度,但具有不同的高度,因为我们只是直接设置高度auto？
如果我们直接将其设置为height: auto,则显然只需将高度设置为子块级元素的高度,该高度不包括其下边距.
html {
background: pink;
}
body {
background: yellow;
}
div {
height: auto;
}
inner …推荐指数
解决办法
查看次数
使flex项具有100%高度和溢出:滚动
我想要一个弹性项目占据剩余高度的100%并显示overflow: scroll条形.
看起来问题来自于我#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; …推荐指数
解决办法
查看次数
Chrome会忽略列布局中的flex-basis
我遇到了麻烦的Chrome要注意的柔性基础部分flex: 1 1 25%的flex-direction: column布局.它在row布局中工作正常.
下面的代码片段演示了这个问题:黄色,蓝色和粉红色条形基于柔性基础50px,25%和75%,在列和行弯曲方向上都显示.
如果您在Firefox(或IE11或Edge)中运行它,列和行都按预期划分区域:
但是如果你在Chrome(47)或Safari(9.0.3)中运行它,左边的列布局似乎完全忽略了flex-basis - 条形的高度似乎与flex-basis无关:
左右之间的唯一区别是flex-direction.
.container {
width: 400px;
height: 200px;
display: flex;
background: #666;
position: relative;
}
.layout {
flex: 1 1 100%; /* within .container */
margin: 10px;
display: flex;
}
.row {
flex-direction: row;
}
.column {
flex-direction: column;
}
.exact {
flex: 1 1 50px;
background: #ffc;
}
.small {
flex: 1 1 25%;
background: #cff;
}
.large {
flex: …推荐指数
解决办法
查看次数