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>

Введите описание изображения здесь

Метки

3 ответа

  1. Если вы готовы немного изменить 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. Всегда используйте вместо этого классы.

  2. Вот способ, используя 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);
    });
    
  3. Вот код, который это исправил.

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