Member 14068174 Ответов: 1

Как эти гибкие элементы будут занимать 100% высоты контейнера..


Я хочу, чтобы эти гибкие элементы занимали все пространство этого контейнера..
Хотите, чтобы раздел user_links занимал остальную часть высоты...

Что я уже пробовал:

Я попробовал flex property min height,height и т. д.. Но ничего не произошло..





Здесь код написан на bootstrap


<header class="раздел-заголовок">
<div class="row no-gutters">
<div class="col-md-4 ">
&ЛТ;ИМГ СРЦ="img/person1.jpg" АЛТ="оманских риалов с человека" класс="ИМГ-ИМГ жидкости--экстренный"и GT;
</div>
<div class="col-md-8 bg-danger">
&ЛТ;див класс="информация"и GT;
&ЛТ;див класс="д-флекс БГ-темно-выровнять-предметы-центре оправдать-содержание-вокруг ру-5 текст-белый"и GT;
<h1>Ubaid Rather</h1>

на <i класс="ФАБ-Альфа-Твиттер"&ГТ;&ЛТ;/я и GT;

на <i класс="ФАБ-Альфа-facebook"&ГТ;&ЛТ;/я и GT;

на <i класс="ФАБ-Альфа-instagram"&ГТ;&ЛТ;/я и GT;

на <i класс="ФАБ-Альфа-сети LinkedIn"&ГТ;&ЛТ;/я и GT;

на <i класс="ФАБ-Альфа-гитхаб"&ГТ;&ЛТ;/я и GT;
</div>
<div class="user_proffession">
&ЛТ;Н4 класс="мл-4"и GT;передний конец разработчик&ЛТ;/Н4&ГТ;
</div>
<sectionclass="user_links" >
&ЛТ;див класс="д-флекс выровнять-контент-стреч текста-центре оправдать-содержание-вокруг" и GT;

&ЛТ;портфолио-элемент див класс="БГ-основной" стиль=" "гибкий": 1;"&ГТ;
на <i класс="ФАС ФА-дом ФА-2х"&ГТ;&ЛТ;/я и GT;
&ЛТ;Н2&ГТ;домашний&ЛТ;/Н2&ГТ;
</div>

&ЛТ;портфолио-элемент див класс="БГ-успех" стиль=" "гибкий": 1;"&ГТ;
на <i класс="ФАС Альфа-выпускной-кепка Альфа-2х"&ГТ;&ЛТ;/я и GT;
&ЛТ;Н2&ГТ;продолжить&ЛТ;/Н2&ГТ;
</div>


&ЛТ;портфолио-элемент див класс="БГ-предупреждение" стиль=" "гибкий": 1;"&ГТ;
на <i класс="ФАС ФА-папки-открытые Альфа-2х"&ГТ;&ЛТ;/я и GT;
<h2>файл</h2>
</div>


&ЛТ;портфолио-элемент див класс="БГ-инфо" стиль=" "гибкий": 1;"&ГТ;
на <i класс="ФАС фа-фа конверт-2х"&ГТ;&ЛТ;/я и GT;
&ЛТ;Н2>В Контакте&ЛТ;/Н2&ГТ;
</div>

</div>

</div>
</div>
</div>
</раздел>
</заголовок>

1 Ответов

Рейтинг:
9

Richard Deeming

Вот что у вас есть на данный момент, с исправлением пары опечаток:
Edit fiddle - JSFiddle[^]

<div class="info">
    <div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white">

Вот исправленная версия:
Edit fiddle - JSFiddle[^]
<div class="info d-flex flex-column h-100">
    <div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white flex-grow-1">

  • Добавь d-flex flex-column h-100 к <div class="info">
  • Добавь flex-grow-1 к <div class="d-flex bg-dark align-items-center justify-content-around py-5 text-white">