имейте div stetch внутри div и заполняйте пустое пространство div - PullRequest
Новая
       20

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

0 голосов
/ 11 марта 2019

Я хочу сделать модал, который будет иметь прокручиваемый список предметов.Элементом с возможностью прокрутки является #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>

РЕДАКТИРОВАТЬ:

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

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

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

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

#content {
    flex: 1;
}

1 Ответ

0 голосов
/ 11 марта 2019

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

enter image description here

Редактировать: для динамической работы вы можете использовать flex sticky footer . В противном случае ищите «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>
...