Как расширить DIV, чтобы он занял высоту родительского DIV

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

Вот HTML: https://jsfiddle.net/og7pz9sq

В приведенной выше скрипте я пытаюсь заставить светло-зеленый и светло-желтый DIV занимать белую область. Нижний колонтитул идет сразу после этой белой области и всегда остается внизу страницы.

<!doctype html>
<html lang = "en">

<head>
    <meta charset = "utf-8">
    <meta name = "viewport"
          content = "width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel = "stylesheet"
          integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin = "anonymous">
</head>

<body>
    <div id = "wholepage"
         style = "min-height: 90dvh;">

        <div id = "header">
            <div class = "p-3 bg-primary text-white text-center">
                Bootstrap 5 Page
            </div>
        </div>

        <div id = "topmenu">
            <nav class = "navbar navbar-expand-sm bg-dark navbar-dark">
                <div class = "container-fluid">

                    <ul class = "navbar-nav">
                        <li class = "nav-item">
                            <a class = "nav-link active"
                               href = "#">Active</a>
                        </li>
                        <li class = "nav-item">
                            <a class = "nav-link"
                               href = "#">Link</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div id = "sidebar-and-contents">

            <div class = "row">

                <div id = "sidebar"
                     class = "col-md-auto"
                     style = "display: inline;">

                    <ul class = "nav nav-pills flex-column"
                        style = "background-color: rgb(172, 201, 135);">
                        <li class = "nav-item">
                            <a class = "nav-link"
                               href = "#">Link-Left1</a>
                        </li>

                        <li class = "nav-item">
                            <a class = "nav-link"
                               href = "#">Link-Left2</a>
                        </li>
                    </ul>
                </div>

                <div id = "content"
                     class = "col"
                     style = "background-color: rgb(241, 240, 172);">

                    <div>Main area for dynamic contents based on menu selections</div>

                </div>

            </div>
        </div>

    </div>

    <div id = "footer"
         class = "mt-5 p-4 bg-dark text-white text-center">
        <p>Footer</p>
    </div>

    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin = "anonymous"></script>
</body>

</html>

html css bootstrap-5

01.04.2024 20:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Решение состоит в том, чтобы оттолкнуться от #wholepage и использовать flexbox для растягивания потомков.
Как-то:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

/* new */

#wholepage {
  display: flex;
  flex-direction: column;
}

#sidebar-and-contents {
  display: flex;
  flex-direction: column;
  flex: auto;
}

#sidebar-and-contents .row {
  flex: auto;
}

#sidebar {
  display: flex!important;
  flex-direction: column;
}

#sidebar .nav {
  flex:auto;
}

<!doctype html>
<html lang = "en">

<head>
    <meta charset = "utf-8">
    <meta name = "viewport"
          content = "width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel = "stylesheet"
          integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin = "anonymous">
</head>

<body>
    <div id = "wholepage"
         style = "min-height: 90dvh;">

        <div id = "header">
            <div class = "p-3 bg-primary text-white text-center">
                Bootstrap 5 Page
            </div>
        </div>

        <div id = "topmenu">
            <nav class = "navbar navbar-expand-sm bg-dark navbar-dark">
                <div class = "container-fluid">

                    <ul class = "navbar-nav">
                        <li class = "nav-item">
                            <a class = "nav-link active"
                               href = "#">Active</a>
                        </li>
                        <li class = "nav-item">
                            <a class = "nav-link"
                               href = "#">Link</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div id = "sidebar-and-contents">

            <div class = "row">

                <div id = "sidebar"
                     class = "col-md-auto"
                     style = "display: inline;">

                    <ul class = "nav nav-pills flex-column"
                        style = "background-color: rgb(172, 201, 135);">
                        <li class = "nav-item">
                            <a class = "nav-link"
                               href = "#">Link-Left1</a>
                        </li>

                        <li class = "nav-item">
                            <a class = "nav-link"
                               href = "#">Link-Left2</a>
                        </li>
                    </ul>
                </div>

                <div id = "content"
                     class = "col"
                     style = "background-color: rgb(241, 240, 172);">

                    <div>Main area for dynamic contents based on menu selections</div>

                </div>

            </div>
        </div>

    </div>

    <div id = "footer"
         class = "mt-5 p-4 bg-dark text-white text-center">
        <p>Footer</p>
    </div>

    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin = "anonymous"></script>
</body>

</html>

01.04.2024 22:35

Вы можете рассмотреть возможность использования вертикального гибкого блока, чтобы закрепить нижний колонтитул к концу страницы и увеличить среднюю часть, чтобы заполнить пробелы. d-flex flex-column добавляется к двум родительским контейнерам (wholepage и sidebar-and-contents).

Поскольку вы используете точку останова медиа-запроса md для другого макета, рассмотрите возможность добавления flex-column flex-md-row в контейнер sidebar-and-contents, чтобы убедиться, что контейнер контента растет в правильном направлении для экранов меньшего размера.

См. пример ниже: (Я исключил дополнительные отступы и поля для более наглядной демонстрации.)

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous">

<div id = "wholepage" style = "min-height: 90dvh;" class = "d-flex flex-column">
  <div id = "header">
    <div class = "p-3 bg-primary text-white text-center">
      Bootstrap 5 Page
    </div>
  </div>
  <div id = "topmenu">
    <nav class = "navbar navbar-expand-sm bg-dark navbar-dark">
      <div class = "container-fluid">

        <ul class = "navbar-nav">
          <li class = "nav-item">
            <a class = "nav-link active" href = "#">Active</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "#">Link</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <div id = "sidebar-and-contents" class = "d-flex flex-column col">
    <div class = "row col me-0 flex-column flex-md-row">
      <div id = "sidebar" class = "col-md-auto pe-0" style = "display: inline;">
        <ul class = "nav nav-pills flex-column" style = "background-color: rgb(172, 201, 135);">
          <li class = "nav-item">
            <a class = "nav-link" href = "#">Link-Left1</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "#">Link-Left2</a>
          </li>
        </ul>
      </div>
      <div id = "content" class = "col" style = "background-color: rgb(241, 240, 172);">
        <div>Main area for dynamic contents based on menu selections</div>
      </div>
    </div>
  </div>

</div>

<div id = "footer" class = "p-4 bg-dark text-white text-center">
  <p>Footer</p>
</div>

01.04.2024 22:36

Другие вопросы по теме

Залипание навигации конфликтует с вкладками

Проект CSS-карты

Как сохранить положение значка корзины на панели навигации между настольным компьютером и мобильным устройством?

Google переводчик cdn

Полоса прокрутки с динамической высотой в макете CSS flexbox

Настройте размер тега HTML-видео в зависимости от ширины экрана и масштаба

Что не так с этими запросами CSS Media? - или со мной. Должно быть, виноват кто-то из нас двоих

Проблемы с центрированием модального наложения на экранах мобильных устройств

Почему контейнер flexbox не меняет положение?

Возможно ли, что кнопка, имеющая фокус, и повторное нажатие на нее очистит фокус, используя только CSS?

Как расширить DIV, чтобы он занял высоту родительского DIV

Ответы 2

Другие вопросы по теме

Похожие вопросы