码迷,mamicode.com
                                                                              首页 > 其他好文 > 详细

                                                                              【Flex】子元素设置百分比高度生效的解决方法

                                                                              时间:2019-05-09 13:51:20      阅读:34      评论:0      收藏:0      [点我收藏+]

                                                                              标签:doc   代码   round   initial   htm   必须   使用   1.0   lang   

                                                                              一、问题描述:

                                                                                当使用Flex布局时,子元素设置百分比高度后,如下图没有效果:

                                                                              技术图片

                                                                              二、解决方法:

                                                                                父元素必须设置高度,效果如下图:

                                                                              技术图片

                                                                              技术图片

                                                                               

                                                                              三、完整代码如下

                                                                              技术图片
                                                                              <!DOCTYPE html>
                                                                              <html lang="en">
                                                                              <head>
                                                                                <meta charset="UTF-8">
                                                                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                                                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                                                                                <title>Document</title>
                                                                                <style>
                                                                                  html,body{
                                                                                    height: 100%;
                                                                                    margin:0;
                                                                                    padding:0;
                                                                                    background-color:blue;
                                                                                  }
                                                                                  .box{
                                                                                    display: flex;
                                                                                    height: 100%; /*父元素必须设置高度*/
                                                                                    background-color: red;
                                                                                  }
                                                                                  .content{
                                                                                    height: 40%; /*子元素设置百分比高度*/
                                                                                    background-color:green
                                                                                  }
                                                                                </style>
                                                                              </head>
                                                                              <body>
                                                                                <div class="box">
                                                                                  <div class="content">11</div>
                                                                                  <div></div>
                                                                                </div>
                                                                              </body>
                                                                              </html>
                                                                              View Code

                                                                               

                                                                              【Flex】子元素设置百分比高度生效的解决方法

                                                                              标签:doc   代码   round   initial   htm   必须   使用   1.0   lang   

                                                                              原文地址:https://www.cnblogs.com/xsjs/p/10837719.html

                                                                              (0)
                                                                              (0)
                                                                                 
                                                                              举报
                                                                              评论 一句话评论(0
                                                                              0条  
                                                                              登录后才能评论!
                                                                              ? 2014 mamicode.com 版权所有 京ICP备13008772号-2
                                                                              迷上了代码!
                                                                              宁夏11选5开奖查询