[css] 父元素flex:1,子元素设置height:100%无效 父级的高度是通过flex为1来设置的,然后子级想保持和父级一样的高度 由于这里的父元素是缺省的,所以设置了高度百分百是无效的 可以设置父级高度为0. .content { flex: 1; height: 0; .inner{ width: 100%; height: 100%; } } 1. 2. 3. 4. 5. ...
google搜了一圈发现时父元素没有设置高度,导致子元素height:100%没有可以参考的高度。 除了设置父元素的高度、子绝父相外还有其他方法吗?之前好像有看到过往父级哪个元素加min-width:0;或者min-height:0的 贴上代码: <!DOCTYPEhtml>* {padding:0;margin:0; }body,html{height:100%;width:100%; }.box{heig...
/* 方法1(仅chrome生效,不兼容safari) */.father{height:0;}/* 方法2 */.father{position:relative;}.son{position:absolute;height:100%;top:0;bottom:0;}// 如果你需要width也充满,只需要在son上添加 .son{width:100%;left:0;right:0;}//其实too:0bottom:0与height:100%相对应,可以只写其中一种...
代码如上,可以看到, 在chrome49版本中, item-inner设置的height:100%, 无法充满父元素flex: 1撑满的高度 link: http://jsfiddle.net/y8mboo2s/
父元素flex:1 子元素height:100% {display: flex;flex-direction: column;height:100vh;overflow: hidden; //只要不是auto }.parent{flex:1;min-height:0; //orheight:0}.children{height:100%; //可正常继承 }
先来说明一下这是个什么情况:.container是一个为display: flex;的父元素,里面有一个flex: 1;的自适应宽高的子元素.child-item,如封面的绿框;绿框的里面还有个孙元素.little-div,如封面的蓝框。DOM结构如下:
/* 方法1(仅chrome生效,不兼容safari) */.father{ height: 0;}/* 方法2 */.father{ position: relative;}.son{ position: absolute; height: 100%; top: 0;
代码如上,可以看到, 在chrome49版本中, item-inner设置的height:100%, 无法充满父元素flex: 1撑满的高度 link: http://jsfiddle.net/y8mboo2s/