注册表单容器固定高度致错误提示溢出，如何实现容器自适应拉伸？

问题背景 #

我制作了一个注册表单，表单容器.right-authorization设置了固定宽度90%、高度440px，内部包含登录/邮箱等输入元素，以及用于插入错误提示的.invalid类元素。当插入错误提示后，内容会超出容器范围，点击“SIGN UP”按钮时，容器无法自动拉伸适配新内容。

相关代码 #

HTML代码

<div class="right">
    <form class="right-authorization">
          <div class="sign-in">
            <i class='bx bx-user bx-sm'></i>
            SIGN-UP
          </div>
          <hr>
          <div class="login one-container">
            <div class="login-outside" >
                <div class="login-write">
                    <i class='bx bx-user bx-xs'></i>
                    <input class="inside" type="text" placeholder="email" id="email" >
                </div>
            </div>
            <div id="emailDiv" class="invalid"></div>

            <div class="login-outside">
                <div class="password login-write">
                    <i class='bx bx-lock-alt bx-xs'></i>
                    <input class="inside" type="password" placeholder="password" minlength="6" id="password">
                    
                </div>
            </div>
            <div id="passDiv" class="invalid"></div>

            <div class="login-outside">
                <div class="name-surname login-write">
                    <i class='bx bx-edit-alt bx-xs'></i>
                    <input class="inside" type="text" placeholder="full name" id="fullName">
                </div>
            </div>
            <div id="fullNameDiv" class="invalid"></div>
            
            <div class="login-outside">
                <div class="number login-write">
                    <i class='bx bx-phone bx-xs'></i>
                    <input class="inside" type="text" placeholder="phone number" id="phoneNumber">
                </div>
            </div>
            <div id="phoneDiv" class="invalid"></div>

            <button type="button" onclick="userRegister()">Sign up</button>
              <div class="register-text">
                  <span>Already have an account ? <br><a href="web-site_login.html">Sign in</a></span>
              </div>
          </div>
    </form>
</div>

CSS代码

.right{
    background-color: #222222;
    border-radius: 12px;
    width: 30%;
    display: flex;
    justify-content: center;
}
.right-authorization{
    width: 90%;
    height: 440px;
    border: 1px solid  #363738;
    border-radius: 12px;
    background-color: #2d2d2d;
    color: white;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    overflow: visible;
   
    
}

.sign-in{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
}


.login-outside {
    background-color: #222222;
    border-radius: 10px;
    border: 1px solid  #363738;
    padding: 5px;
    margin-top: 10px;
    width: 250px;
    display: flex;
    align-items: center;
    gap: 5px;
}


.login-write{
    margin-left: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.login-write input{
    margin-bottom: 2px;
    color: white;
    width: 200px;
}

.login-write input:focus{
    border-color: transparent;
    outline: none;
}


.inside{
    background-color: transparent;
    border-color: transparent;
}

.login{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login button{
    background-color: #5e8abe;
    border: 1px solid  #363738;
    border-radius: 10px;
    padding: 3px 20px;
    font-weight: 500;
    width: 110px;
    height: 35px;
    margin-top: 20px;
    color: white;
}

.login button:hover{
    background-color: white;
    color: black;
}


.register-text{
    font-size: 12px;
    color: #8f8f8f;
    padding: 10px;
    display: flex;
    text-align: center;
    margin-top: 10px;
}

.register-text a{
    text-decoration: underline rgb(193, 193, 193);
    color: white;
}

.register-text a:hover{
    color: #7a7a7a;
}

.invalid {
    color: #ff2748;
    border-color: #ff2748;
    margin-top: 5px;
}

JavaScript代码

function userRegister(){
    let emailField = document.getElementById("email").value;
    let passField = document.getElementById("password").value;
    let fullNameField = document.getElementById("fullName").value;
    let phoneField = document.getElementById("phoneNumber").value;
    

    let person = {
        email: emailField,
        password: passField,
        fullName: fullNameField,
        phoneNumber: phoneField,
    };

    
    //let users = JSON.parse(localStorage.getItem("UsersVK")) || [];
    if(emailField==""){
        emailDiv.innerHTML="Please inter Email";
    }
    if(passField==""){
        passDiv.innerHTML="Please inter password";
    }
    if(fullNameField==""){
        fullNameDiv.innerHTML="Please inter full name";
    }
    if(phoneField==""){
        phoneDiv.innerHTML="Please inter phone number";
    }

    else{users.push(person);

    //localStorage.setItem("UsersVK",JSON.stringify(users));
    alert("User saved successfully");}


}

解决方案 #

1. 核心CSS修改：移除固定高度，改用最小高度 #

容器无法拉伸的根本原因是设置了固定高度height:440px，把它改成min-height:440px，这样容器在内容较少时保持440px高度，内容增加（比如显示错误提示）时会自动拉伸：

.right-authorization{
    width: 90%;
    /* 替换固定高度为最小高度 */
    min-height: 440px;
    border: 1px solid  #363738;
    border-radius: 12px;
    background-color: #2d2d2d;
    color: white;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    /* 可选：把垂直居中改为顶部对齐，避免内容拉伸后布局偏移 */
    justify-content: flex-start;
    gap: 8px;
    margin-top: 15px;
    overflow: visible;
}

2. 优化JavaScript错误提示逻辑 #

当前代码的else分支只会在phoneField不为空时触发，逻辑有误，应该改为所有字段都不为空才执行保存操作，同时每次验证前清空错误提示，避免重复显示：

function userRegister(){
    let emailField = document.getElementById("email").value.trim();
    let passField = document.getElementById("password").value.trim();
    let fullNameField = document.getElementById("fullName").value.trim();
    let phoneField = document.getElementById("phoneNumber").value.trim();
    
    // 先清空所有错误提示
    document.getElementById("emailDiv").innerHTML = "";
    document.getElementById("passDiv").innerHTML = "";
    document.getElementById("fullNameDiv").innerHTML = "";
    document.getElementById("phoneDiv").innerHTML = "";

    let isValid = true;
    if(emailField === ""){
        document.getElementById("emailDiv").innerHTML = "Please enter Email";
        isValid = false;
    }
    if(passField === ""){
        document.getElementById("passDiv").innerHTML = "Please enter password";
        isValid = false;
    }
    if(fullNameField === ""){
        document.getElementById("fullNameDiv").innerHTML = "Please enter full name";
        isValid = false;
    }
    if(phoneField === ""){
        document.getElementById("phoneDiv").innerHTML = "Please enter phone number";
        isValid = false;
    }

    // 所有字段验证通过才执行保存
    if(isValid){
        let users = JSON.parse(localStorage.getItem("UsersVK")) || [];
        let person = {
            email: emailField,
            password: passField,
            fullName: fullNameField,
            phoneNumber: phoneField,
        };
        users.push(person);
        localStorage.setItem("UsersVK",JSON.stringify(users));
        alert("User saved successfully");
        // 可选：清空表单
        document.querySelector(".right-authorization").reset();
    }
}

3. 可选：调整表单内边距 #

如果修改justify-content:flex-start后内容贴顶，可以给.right-authorization增加顶部内边距，优化视觉效果：

.right-authorization{
    /* ...其他样式 */
    padding-top: 20px;
}

内容的提问来源于stack exchange，提问作者Almas Iskak