如何让Popup自适应内容？设置height:auto时弹窗显示异常

需要创建一个可自适应内容的Popup，目标是根据下拉菜单选择切换不同信息，但设置height:auto后，弹窗头部（popup-header）和弹窗主体（popup-body）显示异常，相关代码如下：

原始CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1c1a1a;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ===== Transition ===== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}


.parameter{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: auto;
    width: 300px;
    max-height: 800px;
    display: flex;
    flex-direction: column;
}

/*Paramètre du bouton de la fenêtre modal*/
.parameter .close-modal{
    padding: 5px 20px;
    height: 10%;
    border: none;
    border-radius: 0px;
    font-size: 10px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
}

/*Activation du background lors du passage de la souris*/
.parameter .close-modal:hover{
    color: #FFF;
    background: rgb(188, 15, 15);
}

/*Paramètres du texte de la modal*/
.popup-header h1{
    font-size: 12px;
    margin-top: 5px;
    margin-left: 0px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}
/**/
.parameter .popup-header{
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0% 2%;
    background-color: #FFF;
    color: rgb(0, 0, 0);
}

/*Paramètres du body de la popup*/
.parameter .popup-body{
    background-color: #e0e0e0;
}

/*Paramètres formulaire*/
.form{
    width: 100%;
}

/*Paramètres du texte de la modal*/
.form h1{
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}

/*Paramètres des entrées*/
.form .input_field{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Paramètres des labels entrées*/
.form .input_field label{
    width: 150px;
    color: #11101d;
    margin-right: 10px;
    font-size: 15px;
}

.form .custom_select{
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.form .custom_select{
    color: #11101d;
    margin-right: 10px;
    font-size: 14px;
    
}

/*Paramètres de l'option select*/
.form .custom_select select{
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    border: 1px solid #d5dbd9;
    width: 30%;
    height: 100%;
    padding: 1px 2px;
    border-radius: 3px;
}

/*Paramètres des aires de textes*/
.form .input_field .input,
.form .input_field .textarea{
    width: 30%;
    outline: none;
    border: 1px solid #d5dbd9;
    font-size: 15px;
    padding:1px 2px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/*Paramètres du bouton de connection*/
.form .input_field .btn{
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border: 0;
    background: #707070;
    color: #FFF;
    cursor: pointer;
    outline: none;
}

/*Paramétres hover bouton*/
.form .input_field .btn:hover{
    background: #11101d;
    color: #FFF;
}

原始HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <title>Sail Vision</title>
  </head>
  <body>
      <div class="modal-container-param">
        <div class="overlay">
          <div class="parameter">
            <div class="popup-header">
              <button class="close-modal modal-trigger-param">X</button>
              <h1>Paramétres de liaisons</h1>
            </div>
            <div class="popup-body">
              <div class="form">
                <h1>LIAISON UDP</h1>
                <div class="custom_select">
                  <label>Type de centrale</label>
                  <select name="select">
                    <option value="value1" selected>NMEA</option>
                    <option value="value2">NKE</option>
                    <option value="value3" >BRAVO</option>
                  </select>
                </div>
                <div class="UDP">
                  <div class="input_field">
                    <label>Numero de port IN</label>
                    <input type="text" class="input">
                  </div>
                </div>
                <div class="input_field">
                  <input type="submit" value="Connect" class="btn">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </body>
</html>

问题根源 #

1. .popup-header未设置display: flex，内部按钮和标题无法正确横向排列
2. .close-modal使用height:10%，但父元素为绝对定位，百分比高度无法正确计算，导致按钮高度异常
3. .popup-header和.popup-body缺少内边距，内容紧贴边框，布局拥挤
4. .popup-body未设置flex:1，无法在flex容器中自动填充剩余空间

修复后的关键CSS代码 #

替换原始CSS中对应的部分：

.parameter .close-modal{
    padding: 5px 20px;
    /* 移除异常的百分比高度，改用padding控制按钮尺寸 */
    border: none;
    border-radius: 0px;
    font-size: 10px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
}

.parameter .popup-header{
    width: 100%;
    /* 添加flex布局，实现内部元素横向对齐 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 增加内边距，提升头部空间感 */
    padding: 10px 2%;
    background-color: #FFF;
    color: rgb(0, 0, 0);
    /* 设置最小高度，避免内容挤压 */
    min-height: 40px;
}

.parameter .popup-body{
    background-color: #e0e0e0;
    /* 添加内边距，让表单与边框保持间距 */
    padding: 10px;
    /* 设置flex:1，让body自动填充容器剩余空间 */
    flex: 1;
}

修复效果 #

• 弹窗头部的关闭按钮和标题现在能正确横向排列，布局整齐
• 弹窗主体有了内边距，表单元素不再紧贴边框，视觉效果更舒适
• flex:1确保popup-body在自适应高度的容器中自动扩展，配合height:auto完美实现内容自适应
• 移除百分比高度后，关闭按钮尺寸稳定，不再出现布局异常

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