如何让Image Div高度匹配Container？前端布局问题求助

问题 #

登录页面开发中，#image div高度与#container不一致，图片尺寸正常，但#image div高度略小。

原代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="container">
    <div id="image">
        <img src="halie-west-25xggax4bSA-unsplash.jpg" alt="leaves and trees">
    </div>
    <div id="form">
        <fieldset id="info">    
            <h1>Let's do this!</h1>

            <div class="row">
                <div class="column">
                    <label for="first-name">First Name</label>
                    <input type="text" required id="first-name">
                </div>

                <div class="column">
                    <label for="last-name">Last Name</label>
                    <input type="text" id="last-name">
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="email">Email</label>
                    <input required type="email" id="email">
                </div>

                <div class="column">
                    <label for="phone-number">Phone Number</label>
                    <input type="number" required id="phone-number">
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="password">Password</label>
                    <input type="password" required id="password">
                </div>

                <div class="column">
                    <label for="confirm-password">Confirm Password</label>
                    <input type="password" required id="confirm-password">
                </div>
            </div>
        </fieldset>
        <div id="submit-button">
        <button id="submit" type="submit" method="post">Submit</button>
        </div>
    </div>
    </div>
</body>
</html>

CSS #

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#form {
    
    position: absolute;
    display:inline-block;
    width: 100%;
       
}

#info {
    width: 100%;
    border: none;
    box-shadow: 0 20px 20px -20px black;
    
}

.row {
    display: flex;
    justify-content: left;
}

#info h1{
    text-align: left;
}
.column{
    margin:10px;
}

.column label{
    display: block;
    text-align: left;
    padding:5px;
    
}
#info input{
    
    align-items: end;
}
#submit{
    height: 3rem;
    width:12rem;
    margin: 3rem 0 0 3rem;
    display:flex;
    justify-content: center;
    align-items: center;
    
}
#image{
    position: relative;
    width: 35%;
    height: 100vh;
    display: inline-block;
   
    
}
#image img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    
    
}
#container{
    display: inline-block;
    align-items: center;
    justify-content: left;
    height: 100%;
}

修复方案 #

替换以下CSS代码块，直接覆盖原对应样式：

body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#container {
    display: flex;
    min-height: 100vh;
}

#image {
    position: relative;
    width: 35%;
}

#image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

修复说明 #

1. 容器布局调整：把#container改成flex布局，让内部的#image和#form自动对齐高度，同时设置min-height:100vh确保容器占满整个视口高度。
2. 移除绝对定位：删掉#form的position:absolute，避免它脱离文档流导致容器无法感知其高度，改用flex:1让表单占满容器剩余宽度。
3. 图片高度继承：去掉#image的固定height:100vh，让它继承容器的高度；图片设置height:100%，确保完全填充父容器。

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