Заполните нижнее пространство div с помощью CSS.

Ответ 1

Вы можете использовать display:flex:

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  display: flex; /*Added*/
  flex-direction: column; /*Added*/
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
  background: yellow;
  flex: 1; /*Added*/
}

jsFiddle

Документация

Ответ 2

Я знаю, что вы приняли ответ за display:flex;, но я просто хочу добавить ответ, более дружественный к браузеру, используя display:table:

Fiddle, если фрагмент кода не работает.

.popup {
    width: 200px;
    height: 200px;
    background: grey;
    padding: 5px;
}
.popup .top {
    width: 100%;
    background: orange;
}
.popup .bottom {
    position: relative;
    width: 100%;
    background: yellow;
    height: 100%;
}
#test1 .popup {
    display: flex;
    flex-direction: column;
}
#test1 .popup>.bottom {
    flex: 1;
}
#test2 .popup {
    display:table;
}
#test2 .popup > .row {
    display:table-row;
}
#test2 .popup > .row > div {
    display:table-cell;
}

<h2> Flex </h2>
<div id="test1">
    <div class=popup>
        <div class=top>
            <input type=text />
            <input type=text />
        </div>
        <div class=bottom>I want to fill the rest of the popup!</div>
    </div>
</div>
<br />
<h2> Table </h2>
<div id="test2">
    <div class=popup>
        <div class="row">
            <div class=top>
                <input type=text />
                <input type=text />
            </div>
        </div>
        <div class="row">
            <div class=bottom>I want to fill the rest of the popup!</div>
        </div>
    </div>
</div>

Ответ 3

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  overflow:hidden;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: yellow;
}

<div class=popup>
  <div class=top>
    <input type=text />
    <input type=text />
  </div>
  <div class=bottom>I want to fill the rest of the popup!</div>
</div>

Ответ 4

Как это?

.popup {
  width: 200px;
  background: grey;
  padding: 5px;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: 200px; /**Change height here**/
  background: yellow;
}

<div class=popup>
  <div class=top>
    <input type=text />
    <input type=text />
  </div>
  <div class=bottom>I want to fill the rest of the popup! I want to fill the rest of the popup! I want to fill the rest of the popup! I want to fill the rest of the popup!</div>
</div>

Ответ 5

Попробуйте использовать flex.

Чтобы добавить всплывающее окно:

display: flex;
flex-direction:column;

Вниз добавить:

flex: 1;

Fiddle: Flex Demo

Ссылка: Css-Tricks

Надеюсь, это то, что вы искали.