flex-grow实现上下两栏自适应布局

来源:赵克立博客 分类: 前端设计 标签:flex兼容性flexcss发布时间:2019-05-12 14:22:07最后更新:2019-05-12 17:23:38浏览:110
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2019-05-12 17:23:38

chrome内核兼容性

从我手边已有的版本测试结果兼容 Chrome/39.0.2171.95 - Chrome/74.0.3729.131

上下自适应布局

上一篇  flex实现水平自适应布局 这里顺便记录下上下自适应布局如下

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>flex布局测试</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .main {
        height: 100%;
        width: 50%;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
    }
    .topdiv,
    .downdiv {
        width: 100%;
    }
    .topdiv {
        height: 50px;
        background: #ededed;
    }
    .downdiv {
        flex-grow: 1;
        background: #f00;
    }
    .text {
        white-space: nowrap;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="topdiv">
            50px
        </div>
        <div class="downdiv"> 这些点位文字
            <div class="text">一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素</div>
            下面一些文字</div>
    </div>
</body>
</html>

兼容性遇坑记录

我有一个这样的需求在上面downdiv这个标签中添加一个div并且这个div的高度要跟父级一样高,如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>flex布局测试</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .main {
        height: 100%;
        width: 50%;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
    }
    .topdiv,
    .downdiv {
        width: 100%;
    }
    .topdiv {
        height: 50px;
        background: #ededed;
    }
    .downdiv {
        flex-grow: 1;
        background: #f00;
    }
    .text {
        white-space: nowrap;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="topdiv">
            50px
        </div>
        <div class="downdiv">
            <div class="text"  style="height:100%;">一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素</div>
            </div>
    </div>
</body>
</html>

使用中我发现啦一个兼容性问题PC上用的是 Chrome/74.0.3729.131 显示正常,  然后我在手机端 Chrome/61.0.3163.128  打测试页面发现高度不会跟父级一至,而是由内容高度自动撑开的,所以如果这样布局的话就要换个方法把父级相对定位,子级使用绝对定位然后宽高100%这样就可以啦



微信号:kelicom QQ群:215861553 紧急求助须知
点击更换验证码
Win32/PHP/JS/Android/Python