inline div-stretch bottom to parent bottom but keep top inline

Я попробовал bottom 0, height 100%, reletave / absolute, и я не могу заставить это работать. Я использую bootstrap, если в него что-то встроено. Я хочу попробовать сделать это без Flex BC несовместимым, а также я попробовал и не смог заставить это работать в любом случае.

#dockfill {
    /* these aren't working */
    height: 100%;
    bottom: 0px;
    margins: auto;
    min-height: 100%;
}

<div id="parent">
    <div>junk</div>
    <h2>hello</h2>
    <div id="dockfill">I want this one to always fill remaining space</div>
</div>

jmattheis, 31.12.2016 в 18:38 (источник)

3 ответа

Если вы готовы немного изменить html, вы можете использовать таблицу CSS для этого:

.container {
  border: 2px solid red;
  border-spacing: 10px;
  display: table;
  height: 200px;
  margin: 0 auto;
  width: 300px;
}
.container .tr {
  display: table-row;
}
.container .a,
.container .b {
  border: 2px solid red;
  display: table-cell;
  height: 20px;
}
.container .fill {
  border: 2px solid green;
  display: table-cell;
}

<div class="container">
  <div class="tr">
    <div class="a"></div>
  </div>
  <div class="tr">
    <div class="b"></div>
  </div>
  <div class="tr">
    <div class="fill"></div>
  </div>
</div>

http://codepen.io/connexo/pen/dNbvbg

Никогда не используйте идентификаторы в селекторах CSS. Всегда используйте вместо этого классы.

Вот способ, используя jQuery:

https://jsfiddle.net/ynhzb2r1/

$(document).ready( function () {
    var innerElHeight = 0,
        parentHeight = $('#parent').outerHeight(true);
    $('#parent > *:not("#dockfill")').each( function () {
       innerElHeight += $(this).outerHeight(true); 
    });
    console.log(innerElHeight);
    var dockHeight = parentHeight - innerElHeight;
    $('#dockfill').height(dockHeight);
});

Вот код, который это исправил.

  <div class="container-fluid" style="position: absolute;top: 50px;bottom: 25px;width: 100%;">
    <div class="row content" style="height:100%">
      <!-- LIST OR OBJECT DETAILS AREA -->
      <div class="col-sm-10" style="height:100%;padding-top:5px;">
        Stuff...
      </div>
    </div>
  </div>