问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex-direction: column布局，高度缩小时，main标签内容侵占header内容，怎么解决？

头像
向东是大海
    9812039
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="signup.css">
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
<header><a href="#">首页</a></header>
<main>
<form method="POST" action="#">
    <div>
        <label for="username">用户名：</label>
        <input type="text" class="text" name="username" id="username">
        <p class="msg">
            <i class="ati"></i>
            5-25个字符，一个汉字为两个字符，推荐使用中文用户名
        </p>
    </div>
    <div><b id="count">0个字符</b></div>
    <div><label for="pwd">登陆密码：</label>
        <input type="password" id="password">
        <p class="msg">
            <i class="err"></i>
            6-16个字符，请使用字母加数字或符号的密码组合，不能单独
        </p>
    </div>
    <div style="margin:3px 0 10px 0">
        <em class="active">弱</em><em>中</em><em>强</em>
    </div>
    <div style="margin-bottom: 20px">
        <label for="pwd2">确认密码</label>
        <input type="password" id="password2" disabled="">
        <p class="msg">
            <i class="ati"></i>
            请再输入一次
        </p>
    </div>
    <div>
        <label for="random">验证码：</label>
        <input type="text" id="random" style="width:50px">
        <img src="images/get_img.jpg" height="30" width="100">
        <a class="changeImg" href="javascript:;" title="重新获取验证码"></a>
    </div>
    <div>
        <input type="submit" value="同意协议并注册" class="submitbtn">
    </div>
</form>
</main>
<footer><address>版权所有：</address></footer>
</body>
</html>

    上面是html代码

    html,body{height: 100%;}
body{margin:0 ;
    padding: 0;
    font: 16px/1.5em Microsoft YaHei;
    background: #FFC;
    display: flex;
    flex-direction:    column;
    justify-content: space-between;}
header,footer{flex: 0 1;}
header{background: #09C;}
footer{background: #CCC;}
main{flex: 1 0;
    display: flex;
    justify-content: center;
    align-items: center;}

    上面是css代码

    chrome浏览器时：
    图片描述

    可以看到，main标签侵占了header标签，但是没有侵占footer标签，同时footer标签没有缩小。

    edge浏览器时：
    图片描述

    可以看到，main标签没有侵占header和footer标签，并且footer标签缩小了

    怎么使chrome变成和edge一样的效果，并且header标签像footer标签一样缩小？

    css
    阅读 3k
    1 个回答
    得票最新
    头像
    spencerht
      7.8k2728
      ✓ 已被采纳

      你的flex属性写法不对。

      flex: 1 0;

      是以空格分割

      此外，我觉得edge上的效果像是flex属性错误，默认为none时候的样式。
      如果你需要这样的样式，那么

      main {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

      补充：

      <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="signup.css">
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <header><a href="#">首页</a></header>
    <main>
        <form method="POST" action="#">
            <div>
                <label for="username">用户名：</label>
                <input type="text" class="text" name="username" id="username">
                <p class="msg">
                    <i class="ati"></i> 5-25个字符，一个汉字为两个字符，推荐使用中文用户名
                </p>
            </div>
            <div><b id="count">0个字符</b></div>
            <div><label for="pwd">登陆密码：</label>
                <input type="password" id="password">
                <p class="msg">
                    <i class="err"></i> 6-16个字符，请使用字母加数字或符号的密码组合，不能单独
                </p>
            </div>
            <div style="margin:3px 0 10px 0">
                <em class="active">弱</em><em>中</em><em>强</em>
            </div>
            <div style="margin-bottom: 20px">
                <label for="pwd2">确认密码</label>
                <input type="password" id="password2" disabled="">
                <p class="msg">
                    <i class="ati"></i> 请再输入一次
                </p>
            </div>
            <div>
                <label for="random">验证码：</label>
                <input type="text" id="random" style="width:50px">
                <img src="images/get_img.jpg" height="30" width="100">
                <a class="changeImg" href="javascript:;" title="重新获取验证码"></a>
            </div>
            <div>
                <input type="submit" value="同意协议并注册" class="submitbtn">
            </div>
        </form>
    </main>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            font: 16px/1.5em Microsoft YaHei;
            background: #FFC;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        header,
        footer {
            display: flex;
            flex: 0 1 auto;
            height: 20px;
            overflow: hidden;
        }

        header {
            background: #09C;
        }

        footer {
            background: #CCC;
        }

        main {
            flex: 1 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <footer>
        <address>版权所有：</address>
    </footer>
</body>

</html>

      你想要的大概是这样的效果？

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题