内联div - 将底部拉伸到父底部但保持顶部内联

Question

我已经尝试过0，高度100％，取消/绝对，我似乎无法让这个工作。如果内置了某些内容，我就会使用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>

Answer 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选择器中使用ID。 总是代替使用类。

Answer 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);
});

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