CSS div灵活的3行布局

Question

我在这里做了一个JS Bin来展示我想要实现的目标。我用display: flex取得了成功，但不幸的是它与IE11和Opera不兼容。

我想要一个跨浏览器的CSS解决方案，#row_1的{​​{1}} max-height和400px min-height。

当0没有内容时，#row_1应占用#row_2

中的所有高度

当#container包含内容时，#row_1应调整大小，使#row_2包含内容，#row_1填充容器的高度。

  

#row_2可以有row_1，max-height: 400px

     

min-height: 0可以有row_2和max-height: #container - #row_1

min-height: 500px

<div id="header"><h1>Height 80px</h1></div>
<div id="container">
<div id="row_1">
  Here can be something or nothing at all<br>
</div>
<div id="row_2">this should fill the all available height of parent div</div>

Answer 1

配置元素h1的样式属性。

div#header h1 {
    padding: 0;
    margin: 0;
}