Иметь div stetch внутри div и заполнить пустое пространство div

Я хочу сделать модальное окно с прокручиваемым списком элементов. Прокручиваемый элемент — это div #content. В нижней части модального окна я хочу иметь нижний колонтитул, который будет выбран из прокручиваемого элемента div. Что я не могу понять для жизни, так это сохранить прокручиваемый div и нижний колонтитул внутри модального div.

Прямо сейчас я получил нижний колонтитул div вне модального, но как мне сделать так, чтобы нижний колонтитул находился внутри модального элемента. Когда вы проверите элементы, вы увидите, что нижний колонтитул находится за пределами модального окна и ниже модального. Я пытался использовать так много приемов CSS, и мне не повезло.

#background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
}

#modal {
  position: absolute;
  top: 25%;
  left: 25%;
  bottom: 25%;
  right: 25%;
  width: 50%;
  height: 50%;
}

#content {
  overflow-y: scroll;
  height: 100%;
  background-color: blue;
}

#footer {
  background-color: red;
}

<div id = "background">
  <div id = "modal">
    <div id = "content">
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </div>

    <div id = "footer">
      <div>Selected Item</div>
    </div>
  </div>
</div>

Обновлено:

Лучшее решение для устаревших браузеров — заменить высоту в #content на...

#content {
    height: calc(100% - 20px);
}

Лучшее решение для IE11 и выше — добавить следующий CSS и удалить высоту из #content. Спасибо @Miro за эти решения.

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

#content {
    flex: 1;
}

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

— 11.03.2019 20:14

Элемент #content должен быть прокручиваемым.

— 11.03.2019 20:15

вы хотите, чтобы нижний колонтитул был всегда виден или при прокрутке был внизу?

— 11.03.2019 20:15

Я хотел бы, чтобы нижний колонтитул был всегда виден.

— 11.03.2019 20:17

нижний колонтитул уже всегда виден на моем конце

— 11.03.2019 20:17

Вы правы, это видно, но когда вы просматриваете элементы и наводите указатель мыши на элемент #modal div, нижний колонтитул находится не внутри элемента, а снаружи и под ним. Я нахожу это странным, так как модальная высота составляет 50%, но с нижним колонтитулом она теперь превышает 50%.

— 11.03.2019 20:21

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

— 11.03.2019 20:22

но вы это сделали, просто нужно, чтобы это выглядело более эстетично

— 11.03.2019 20:25

Я сделал и я не сделал. Я не хочу ничего вне модального. Я хочу, чтобы все это было спрятано внутри модального окна. Модальная высота составляет 50% окна, и я хочу, чтобы она оставалась такой и не превышала 50% высоты.

— 11.03.2019 20:26

css modal-dialog

11.03.2019 19:57

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

Когда я проверяю, #footer не выходит за пределы модального окна на моем конце. Это именно то место, где оно должно быть в соответствии с html. Если вы хотите, чтобы нижний колонтитул также можно было прокручивать, он должен быть внутри #content.

Обновлено: чтобы он работал динамически, вы можете использовать гибкий липкий нижний колонтитул. В противном случае найдите «css только липкий нижний колонтитул» для других решений.

#background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: grey;
}

#modal {
  position: absolute;
  top: 25%;
  left: 25%;
  bottom: 25%;
  right: 25%;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
}

#content {
  overflow-y: scroll;
  height: 100%;
  background-color: blue;
  position: relative;
  flex: 1;
}

#footer {
  background-color: red;
}

<div id = "background">
  <div id = "modal">
    <div id = "content">
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
      <div class = "item">Item</div>
    </div>
    
    <div id = "footer">
        <div>Selected Item</div>
    </div>

  </div>
</div>

Вы правы, это видно, но когда вы проверяете элементы и наводите указатель мыши на элемент #modal div, нижний колонтитул находится не внутри элемента, а снаружи и под ним.

— 11.03.2019 20:21

Я нахожу это странным, так как модальная высота составляет 50%, но с нижним колонтитулом она теперь превышает 50%.

— 11.03.2019 20:22

Это потому, что вы установили высоту #content на 100%, поэтому он выталкивает нижний колонтитул. вы можете попробовать с height: calc(100% - 20px); на #content, где 20px — высота нижнего колонтитула.

— 11.03.2019 20:25

Это работает. Есть ли способ не устанавливать высоту 20 пикселей и сделать высоту нижнего колонтитула динамической?

— 11.03.2019 20:30

Спасибо. Это то, что я был после.

— 11.03.2019 20:50

11.03.2019 20:16