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

ProgramBox

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

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#css #modal-dialog

#css #модальный диалог

Вопрос:

Я хочу создать модальный файл, который будет иметь прокручиваемый список элементов. Прокручиваемый элемент — это #content div. В нижней части модального я хочу иметь нижний колонтитул, в котором будет выбран элемент из прокручиваемого 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>

Редактировать:

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

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

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

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

#content {
    flex: 1;
}

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

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

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

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

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

Ответ №1:

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

Редактировать: Чтобы заставить его работать динамически, вы можете использовать гибкий липкий нижний колонтитул. В противном случае найдите ‘css only sticky footer’ для других решений.

 #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>

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

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

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

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

5. Спасибо. Это то, чего я добивался.