section高度随内容自适应后内部leftside2与rightside2无法填充父容器问题求助

问题原因 #

• 父容器.unique设置了固定高度height: 600px，无法随内部内容变化自动适配高度
• 子元素高度规则选择器写错：原代码.this .rightside2 .leftside2是选中.rightside2内部的.leftside2，但实际两个元素是同级关系，该规则从未生效
• .info使用了绝对定位且定位值是全局固定数值，绝对定位元素脱离文档流，父容器计算高度时不会纳入该元素的尺寸，同时固定定位值在父容器高度变化后会出现位置错位
• 弹性布局的子元素额外设置了h-100类，和flex默认的align-items: stretch特性冲突，导致高度无法自适应拉伸

修改方案 #

1. HTML调整 #

删除leftside2和rightside2元素上的h-100类：

<div class="leftside2 w-50">
    <img src="images/twowomen.jpg" alt="twowomen" class="img-fluid">
</div>
<div class="rightside2 w-50">

2. CSS调整 #

.form-group .inputs{
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    width: 70% !important;
}
.form-group .btn{
    padding: 15px 45px !important;
    border-radius: 50px !important;
}
.fineText .consulting{
    font-size: 37px;
    font-family: "Gabriola";
    color: #28a745;
    font-weight: bolder;
}
.rightside2{
    padding-left: 100px !important;
}
/* 新增leftside2图片规则，填满容器无空白 */
.leftside2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.info{
    position: absolute;
    /* 改为相对于父容器底部定位，替换原来的全局top值 */
    bottom: -30px;
    left: 100px;
}
.unique{
    /* 替换固定高度为最小高度，允许被内容撑开 */
    min-height: 600px;
    /* 新增相对定位，让内部绝对定位的info相对于当前容器偏移 */
    position: relative;
    /* 新增底部内边距，避免info溢出后和下方元素重叠 */
    padding-bottom: 150px;
}
/* 修正选择器，匹配两个同级子元素 */
.this .rightside2,
.this .leftside2{
    height: 100%;
}

修改后section会根据内部内容自动调整高度，左右两侧容器会自动填充父容器高度，图片也不会出现上下空白。

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