chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container">
<div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div> <div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div> <div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div>
</div>
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex:;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}
代码如上,可以看到, 在chrome49版本中, item-inner设置的height:100%, 无法充满父元素flex: 1撑满的高度
link: http://jsfiddle.net/y8mboo2s/
chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素的更多相关文章
- 如何让 height:100%; 起作用---父级元素必须设定高度
参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...
- chrome 49 版本 跨越 --args --disable-web-security --user-data-dir
转载: 做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access- ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 为什么子元素设置margin-top会作用在父元素上?
原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- python基础之if语句
python之if语句 通用格式 if <test1>: <do something> elif: <do something> else: <do some ...
- C++中定义NULL的头文件
NULL不是C语言基本类型,其定义在stddef.h文件中,作为最基本的语言依赖宏存在.但是随着C/C++的发展,很多文件只要涉及了系统或者标准操作都会将NULL作为标准宏声明或者包含.所以几乎包含任 ...
- JPA Spring Data 概述
JPA Spring Data : 致力于减少数据访问层 (DAO) 的开发量. 开发者唯一要做的,就只是声明持久层的接口,其他都交给 Spring Data JPA 来帮你完成! 框架怎么可能代替开 ...
- html5 七巧板
<!DOCTYPE html><html> <canvas id="diag" height="200" width=&qu ...
- HDU——2955 Robberies (0-1背包)
题意:有N个银行,每抢一个银行,可以获得\(v_i\)的前,但是会有\(p_i\)的概率被抓.现在要把被抓概率控制在\(P\)之下,求最多能抢到多少钱. 分析:0-1背包的变形,把重量变成了概率,因为 ...
- SQL 处理排序空值
①oracle默认排序空值在后面 如果想要排序空值在前面可用关键字 NULLS FIRST, 排序空值在后面也有关键字NULLS LAST ②sqlserver默认排序空值在前面 如果想要排序时空值在 ...
- pyDay11
内容来自廖雪峰的官方网站. 1.杨辉三角generator: def triangles(): L = [1] while True: yield L L.append(0) L = [L[i-1] ...
- SNMP Introduction
Basic command of SNMP: GET: The GET operation is a request sent by the manager to the managed device ...
- 前端学习笔记之CSS文档流
先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...
- Java面试知识点总结及解析
声明:有人说, 有些面试题很变态,个人认为其实是因为我们基础不扎实或者没有深入.本篇文章来自一位很资深的前辈对于最近java面试题目所做的总结归纳,有170道题目 ,知识面很广 ,而且这位前辈对于每个 ...