html - 我想让这个部分的高度随着它的内容而增加

问题描述

我试过这个

<section class="unique">
    <div class="this d-flex pt-5">
        <div class="leftside2 w-50 h-100">
            <img src="images/twowomen.jpg" alt="twowomen" class="img-fluid">
        </div>
        <div class="rightside2 w-50 h-100">
            <h5 class="text-success pl-5">WE HELP YOU</h5>
            <div class="fineText d-flex pl-5">
                <h3>Get A</h3>
                <h3 class="consulting pl-2">CONSULTING</h3>
            </div>
            <form action="">
                <div class="form-group">
                    <input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="Your Name" id="fname" required>
                </div>
                <div class="form-group">
                    <input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="Your Email Adress" id="fname" required>
                </div>
                <div class="form-group">
                    <input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="Phone Number" id="fname" required>
                </div>
                <div class="form-group">
                    <input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="I would like to discuss" id="fname" required>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-success ml-5">SUBMIT</button>
                </div>
            </form>
        </div>
    </div>
    <div class="info bg-success w-25 text-white font-weight-bold p-4">
        <span>ADDRESS</span>
        <p class="pb-3">Mostafa Naguib <br> Street, 14 Box, Cairo, <br> Egypt</p>
        <span>EMAIL</span>
        <p class="pb-3">cairooffice@financer.com</p>
        <span>PHONE NUMBER</span>
        <p class="pb-3"><a href="#" class="text-decoration-none">002 0100 843 1112</a></p>
        <span>WEBSITE</span>
        <p>www.financer.org</p>
    </div>
</section>

然后是样式：

.form-group .inputs{
border: none !important;
border-bottom: 1px solid #ccc !important;
width: 70% !important;
}
.form-group .btn{
padding: 15px !important;
padding-left: 45px !important;
padding-right: 45px !important;
border-radius: 50px !important;
}
.fineText .consulting{
font-size: 37px;
font-family: "Gabriola";
color: #28a745;
font-weight: bolder;
}
.rightside2{
padding-left: 100px !important;
}
.info{
position: absolute;
top: 1630px;
left: 400px;
/* padding: 35px !important; */
}

.unique{
height: 600px;
}
.this .rightside2 .leftside2{
height: 100%;
}

但是在尝试之后，只有部分的高度增加了，但leftside and 右侧`保持不变。

看这张图片：

图像上方和下方的空间是该部分的高度，leftside并且rightside应该填充该空间。

我进行了研究，但没有找到任何有用的建议。

请我需要帮助。提前致谢

标签： htmlcssbootstrap-4

html - 我想让这个部分的高度随着它的内容而增加

问题描述

解决方案

推荐阅读