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 ...
随机推荐
- Openstack(九)部署nova服务(控制节点)
9.1nova服务介绍 nova是openstack最早的组件之一,nova分为控制节点和计算节点,计算节点通过nova computer进行虚拟机创建,通过libvirt调用kvm创建虚拟机,nov ...
- Spark 参数配置的几种方法
1.Spark 属性Spark应用程序的运行是通过外部参数来控制的,参数的设置正确与否,好与坏会直接影响应用程序的性能,也就影响我们整个集群的性能.参数控制有以下方式:(1)直接设置在SparkCon ...
- 【转】Deep Learning(深度学习)学习笔记整理系列之(一)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-0 ...
- 小型网站MYSQL问题二:Percona Xtrabackup实现数据库备份和恢复
1.安装软件仓库(不要问我为什么不用源码安装,好吧,其实我懒.) 1 2 3 4 5 6 7 8 wget https://www.percona.com/downloads/percona-rele ...
- MySQL事务之-2
在上一篇中我们提到了MySQL的事务特性,这一片主要讲述事务的实现. 事务的隔离性由锁来实现.原子性,一致性,持久性通过数据库的redo和undo log来实现. redo恢复提交事务修改页的操作,而 ...
- JavaWeb实现分页的四种方法
一.借助数组进行分页 原理:进行数据库查询操作时,获取到数据库中所有满足条件的记录,保存在应用的临时数组中,再通过List的subList方法,获取到满足条件的所有记录. 实现: 首先在dao层,创建 ...
- 如何解决tensorflow报:Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
答:使能AVX,AVX2和FMA来进行源码编译,这样可以提速噢 具体编译方法,请参考windows10下如何进行源码编译安装tensorflow
- sql server timeout
SqlConnection.ConnectionTimeout https://docs.microsoft.com/en-us/dotnet/api/system.data.sqlclient.sq ...
- django 常用字段类型
<> CharField #字符串字段, 用于较短的字符串. #CharField 要求必须有一个参数 maxlength, 用于从数据库层和Django校验层限制该字段所允许的最大字符数 ...
- Eclipse.修改项目的JDK版本
1.我实际使用过程中,只是修改了 项目右键-->Properties-->左侧选择"Java Compiler" -->右侧的"JDK Complian ...