html - 占据页面剩余高度的可滚动 div

Question

我本质上是想在我的页面中创建一个框架。这是fiddle .

html,body{
	width:100%;
	height:100%;
}
#container{
	width:100%;
	height:100%;
    position: fixed;
}
#navigation{
	min-height:100%;
    overflow-y: auto;
}
ul {
    background-color: red;
}

<h1>Hello</h1>
<div id="container">
    <div id="navigation">
        <ul>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </div>
</div>

我想要Hello block 保留在顶部，并且带有红色背景的 div 为:

1. 占据整个剩余高度。
2. 如果内容溢出，则可滚动。

即使找到了许多类似的主题(其中大多数建议使内部内容具有 min-height: 100%; )，我的尝试仍然不成功。

我正在尝试使用 position: fixed; height: 100%; 创建一个容器并将我的可滚动区域放入 min-height: 100%; overflow-y: auto; 中。再说一次，这不起作用。

浏览器支持:IE9+

Answer 1

CSS3 和 flex

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

body {
  display: flex;
  flex-flow: column;
}

#container {
  overflow-y: auto;
  flex: 1;
  background: gold;
}

<h1>Hello</h1>

<div id="container">
   <p style="height:2000px;">TALL DEMO</p>END
</div>

CSS 和显示表格/行

* { margin: 0;}
html,body {height: 100%;}
body {overflow: hidden;} /* Fix appearing scrollbar in FF*/

.table {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

.row {
  display: table-row;
}

#row2 {
  height: 100%; /* occupy max height available */
}

.scrollable {
  position: relative;
  overflow-y: auto;
  height: 100%;
  background: gold;
}

<div class="table">

  <div class="row" id="row1">
    <h1>Hello</h1>
  </div>

  <div class="row" id="row2">
    <div class="scrollable">
      <p style="height:2000px;">TALL DEMO</p>END
    </div>
  </div>
</div>