Блог

Главная - Вопросы по программированию - Я хочу, чтобы высота этого раздела увеличивалась вместе с его содержанием

Я хочу, чтобы высота этого раздела увеличивалась вместе с его содержанием

#html #css #bootstrap-4

Вопрос:

Я попробовал это

 <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 другие должны заполнять пространство.

Я провел исследование и не нашел ни одного полезного предложения.

Пожалуйста, мне нужна помощь. Заранее спасибо

Комментарии:

1. Попробуйте убрать фиксированную высоту? height: 600px;

2. @Paulie_D Я не уверен, что проблема в фиксированной высоте, потому что эта фиксированная высота предназначена для раздела

3. @Paulie_D Я все же пробовал

Ответ №1:

Вместо использования фиксированных измерений, почему бы вам не попробовать использовать проценты? Я также не совсем понимаю, что вы подразумеваете под

Пространство над и под изображением-это высота раздела, а те, что слева и справа, должны заполнить пространство.

Не могли бы вы подробнее рассказать об этом, и, может быть, я смогу помочь в дальнейшем?

Комментарии:

1. Два дива находятся в этом разделе, и это пространство над ними и под ними-это пространство, которое есть в разделе из-за его высоты

2. Я также хочу, чтобы он имел разумную высоту и ширину, чтобы он не был размытым

Метки: ,