Question

我在 .container 中有2个元素，即 .header 和 .overflowElem 。

我希望 .overflowElem 获取 .container 的剩余高度，它应该是overflow-y：auto。

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都是使用jQuery＆＃39; 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 添加一个高度，并使用calc（）和bingo计算 .overflowElem 的高度！

但是，因为所有的HTML都是使用jQuery的ajax插入的，并且它在初始化时隐藏了，所以我不知道高度我也不能使用ajax得到它，因为容器是隐藏的

那么，解决方案是什么？任何想法，提示，技巧，黑客...... 感谢

Answer 1

使用flexbox所要做的就是更新div.container规则（为简洁起见，不带前缀）。

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

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

当然，这假设您的浏览器支持允许您使用flexbox。 CSS Tricks has a great write-up of flexbox here.

如何让div在不知道高度的情况下获取剩余高度？

1 个答案: