Блог

Главная - Вопросы по программированию - Увеличьте высоту заполнения div, но не увеличивайте ее (используйте полосу прокрутки для переполнения)

Увеличьте высоту заполнения div, но не увеличивайте ее (используйте полосу прокрутки для переполнения)

#html #css #flexbox #bootstrap-4

#HTML #css #flexbox #bootstrap-4

Вопрос:

У меня есть определенный макет, которого я хочу добиться на своей веб-странице, а именно: введите описание изображения здесь

Макет на приведенном выше изображении построен с использованием следующих классов HTML и bootstrap:

         <div className="ContentWrapper d-flex mh-100 flex-row h-100">
            <div className="ContentBody flex-column flex-fill">
                <div className="ContentHeader p-3 w-100">
                    <h2>Header</h2>
                </div>
                <div className="ContentMain w-100">
                    <h2>Scrollable div, should fill height, but not more than that</h2>
                </div>
            </div>
            <div className="Sidebar h-100">
                <h2>Sidebar content</h2>
            </div>
        </div>

Соответствующий CSS:

 .ContentWrapper {
    background-color: red;
}

.ContentBody {
    background-color: blue;
}

.ContentHeader {
    background-color: yellow;
}

.ContentMain {
    background-color: purple;
    flex: 1;
}

.Sidebar {
    background-color: green;
    width: 500px;
}

Однако, когда в фиолетовой части слишком много содержимого, компонент начинает увеличиваться в высоту. Я хочу предотвратить это и иметь полосу прокрутки в фиолетовом компоненте.

Кроме того, я слышал, что некоторые свойства flex работают по-разному в Chrome и Firefox. Идея в том, что я хочу, чтобы моя веб-страница имела одинаковое поведение в обоих браузерах.

Ответ №1:

Вы можете удалить h-100 on ContentWrapper и добавить height: 100vh к нему. Создайте свой ContentBody гибкий блок, добавив `d-flex-class. Смотрите демонстрацию ниже с пояснениями:

 .ContentWrapper {
  background-color: red;
  height: 100vh; /* ADDED */
}

.ContentBody {
  background-color: blue;
}

.ContentHeader {
  background-color: yellow;
}

.ContentMain {
  background-color: purple;
  flex: 1;
  overflow-y: auto; /* ADDED */
}

.Sidebar {
  background-color: green;
  width: 500px;
}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="ContentWrapper d-flex mh-100 flex-row"> <!-- removed h-100 class -->
  <div class="ContentBody d-flex flex-column flex-fill"> <!-- added d-flex class -->
    <div class="ContentHeader p-3 w-100">
      <h2>Header</h2>
    </div>
    <div class="ContentMain w-100">
      <h2>Scrollable div, should fill height, but not more than that</h2>
    </div>
  </div>
  <div class="Sidebar h-100">
    <h2>Sidebar content</h2>
  </div>
</div>

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

1. вы можете рассмотреть классы начальной загрузки ( getbootstrap.com/docs/4.2/utilities/sizing /… / getbootstrap.com/docs/4.2/utilities/overflow )

Ответ №2:

Просто найдите, что там уже есть ответ… Что бы ни добавляло codepen, я только что закончил, и я думаю, что это более гибкий способ.

 <div class="ContentWrapper d-flex mh-100 flex-row h-100">
  <div class="ContentBody flex-column flex-fill d-flex">
    <div class="ContentHeader p-3 w-100">
      <h2>Header</h2>
    </div>
    <div class="ContentMain w-100 flex-fill overflow-auto">
      <h2>Scrollable div
    </h2>
    </div>
  </div>
  <div class="Sidebar h-100 flex-shrink-0">
    <h2>Sidebar content</h2>
  </div>
</div>

https://codepen.io/ramseyfeng/pen/drWNYQ