Вопрос:

Как заставить div взять оставшуюся высоту, не зная высоты?

jquery html css

507 просмотра

1 ответ

1207 Репутация автора

У меня есть 2 элемента внутри .container , то есть .header и .overflowElem .

Я хочу, чтобы .overflowElem занимал оставшуюся высоту .container , и он должен быть переполнен-y: авто.

HTML

<div class="box">

  <div class="container">

    <div class="header">
      <h1>HEADER</h1>
    </div>

    <div class="overflowElem">
      <ul>
        <li><a href="#">ITEM 1</a></li>
        <li><a href="#">ITEM 2</a></li>
        <li><a href="#">ITEM 3</a></li>
      </ul>
    </div>

  </div>

</div>

Весь этот HTML-код внедряется с использованием jjuery's ajax, например так:

$.ajax({
    type: "GET",
    url: "include/get_list.php",
    data: params
}).done(function(data) {
    var container = $("<div></div>")
        .attr("class", "container")
        .html(data)
        .hide()
        .appendTo(box);

}).fail(function() {
    alert("Error.");

}).always(function(data) {

})

Обратите внимание, как контейнер var скрыт во время инициализации

CSS:

div.box {
  width: 700px;
  border: 1px solid red;
  padding: 45px 20px 20px;
}

div.container {
  height: 500px;
  background-color: #bbb;
}

div.header {
  background-color: red;
  /* HEIGHT in pixels is UNKNOWN */
}

div.overflowElem {
  overflow-y: auto;
  /*
  CANNOT USE THIS BECAUSE i DON'T know the height of .header
  height: calc(100% - height of .header in pixels);*/
}

jsfiddle:

https://jsfiddle.net/n4z02gL2/1/

Теперь я могу добавить высоту в .header и вычислить высоту .overflowElem, используя calc () и bingo!

НО, потому что весь HTML-код вставляется с использованием ajax jQuery, и он скрыт в момент инициализации, я не знаю высоту и не могу получить его с помощью ajax, потому что контейнер скрыт

Итак, каково решение? Любые идеи, советы, хитрости, хаки ... Спасибо

Автор: Marco Источник Размещён: 22.08.2016 09:20

Ответы (1)


1 плюс

5642 Репутация автора

Решение

Используя flexbox, все, что вам нужно сделать, это обновить div.containerправило (без префикса, для краткости).

div.container {
  height: 500px;
  background-color: #bbb;

  // add these properties here
  display: flex;
  flex-direction: column;
}

Конечно, это предполагает, что поддержка вашего браузера позволяет вам использовать flexbox. У CSS Tricks есть отличное описание flexbox.

Автор: chazsolo Размещён: 22.08.2016 09:26
Вопросы из категории :
32x32