Почему я не могу увеличить высоту этого div (используя bootstrap)?

Question

Я пытаюсь увеличить высоту боковой панели, я хочу, чтобы она была такой же высоты, как страница. изображение страницы Я хочу, чтобы поле слева касалось дна, но когда я использую класс h-100 не работает.

Код html элемента:

<div class="container-fluid mt-5">
            <div class="row">
                <div class="col-2 pt-5 sidebar h-100 sticky-top w100">
             ...

Заранее спасибо

Answer 1

1.Если вы хотите установить высоту элемента div, в первую очередь вы должны задать элемент div как display-inline-block. Поскольку встроенный элемент не допускает высоту, а div - встроенный элемент. Установите высоту вручную, используя css

.container-fluid {
    height: 100px;
}

Если h-100 означает height: 100% в соответствии с содержимым элементов div или дочерних элементов. Таким образом, высота будет только высотой текста.

<div class="container-fluid mt-5">
    <div class="row">
      <div class="col-2 pt-5 sidebar h-100 w-100 d-inline-block sticky-top">

тестовый текст

Answer 2

h-100 будет работать, только если родительский div имеет высоту 100%! вы можете использовать 100vh вместо вышеупомянутого, если вы не можете установить высоту для родителя

Answer 3

добавьте этот код в ваш css файл

@media screen and (min-width: 1024px) {
    myNewDivHeight{
        height:250px;
    }
}

добавьте этот класс в ваш div

class="col-md-12 myNewDivHeight"

Answer 4

Ваша боковая панель на самом деле имеет ту же высоту вашей страницы. Ваша страница не касается нижней части экрана.

У вас есть два способа это исправить.

1. установите рост тела 100vh в ваших стилях. css

body {
    height: 100vh;
}

2. заверните страницу в div

<div style="height: 100vh">
    <div class="container-fluid mt-5">
            <div class="row">
                <div class="col-2 pt-5 sidebar h-100 sticky-top w100">
             ...
</div>