第二内容div填充剩余高度，其中第一内容div具有可变高度

Question

我有这个用于不同页面的html页面结构：

<div class="conteiner">
    <div class="header">green</div>
    <div class="fit_on_content">red<br />red</div>
    <div class="fit_all">aqua</div>
    <div class="footer">yellow</div>
</div>

用这个css

.conteiner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: aquamarine;
}
.header {
    position: relative;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: green;
}
.fit_on_content {
    position: relative;
    display: table;
    margin: 0 auto;
    background-color: red;
}
.fit_all {
    background-color: aqua;
    ????
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: yellow;
}

.header位于顶部 .footer位于底部 .fit_on_content位于标题下方，内容的高度可能会因页面而异 .fit_all位于fit_on_content下，必须扩展到页脚。

请问好吗？

由于

Answer 1

以下是使用display: table

的方法

html,
body { height: 100%; margin: 0 }

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.page-row {
  display: table-row;
  height: 1px;
}
.page-row-expanded {
    height: 100%;
}

header {
  background-color: #bbb;
  height: 50px;
}
main {
  background-color: #ddd;
}
main ~ main {
  background-color: #fff;
}
footer {
  background-color: #bbb;
  height: 50px;
}

<div class="container">
    <header class="page-row">
      Header
    </header>
    
    <main class="page-row">
      First content goes here
    </main>
    
    <main class="page-row page-row-expanded">
      Second content goes here
    </main>
    
    <footer class="page-row">
      Copyright, blah blah blah
    </footer>
</div>

使用display: flex;

按要求更新了

但请注意，您需要为不支持flex unsfixed的浏览器添加前缀属性。

html,
body { height: 100%; margin: 0 }

.container {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
}
.page-row {
  flex: 0 0 auto;
}
.page-row-expanded {
  flex: 1 0 auto;
  height: 0;
}

header {
  background-color: #bbb;
  height: 50px;
}
main {
  background-color: #ddd;
}
main ~ main {
  background-color: #fff;
}
footer {
  background-color: #bbb;
  height: 50px;
}

<div class="container">
    <header class="page-row">
      Header
    </header>
    
    <main class="page-row">
      First content goes here
    </main>
    
    <main class="page-row page-row-expanded">
      Second content goes here
    </main>
    
    <footer class="page-row">
      Copyright, blah blah blah
    </footer>
</div>