javascript - CSS/JavaScript : Keep a div size based on container size

Question

我有一个包含 2 个 div 的 div，其中一个具有固定高度。我想确保第二个 div 的高度正好等于容器 div 的高度减去另一个 div 的高度。此高度无法手动设置，因为它经常调整大小。

<div id="container" style="height: 50%"> 
<div id="header" style="height: 30px;"> 
</div> 
<div id="content"> 
</div> 
</div>

我试过使用 jquery 调整大小，但我想我写错了:

$(document).on("resize", "#container", function (event) {
    $('#content').height($('#container').height()-$('#header').height());
});

有什么方法(Javascript、CSS)可以做到这一点吗？

Answer 1

jQuery 方法的替代方法是 CSS Flexbox:

#container {
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
}

参见 demo .不幸的是，这只适用于支持最新 Flexbox 语法的浏览器。 ( http://caniuse.com/#search=flexbox ) 向后兼容的代码也可以使用旧语法，但会更加复杂。请参阅 David Storey 的文章 http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/有关如何执行此操作的更多信息。