可滚动的div占用页面的剩余高度

时间：2015-10-07 13:57:47

标签： html css css3

我实际上是想在我的页面中创建一个框架。这是fiddle。

＆＃13;
＆＃13; 
html,body{
	width:100%;
	height:100%;
}
#container{
	width:100%;
	height:100%;
    position: fixed;
}
#navigation{
	min-height:100%;
    overflow-y: auto;
}
ul {
    background-color: red;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我希望Hello块保留在顶部，而div需要红色背景：

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

    3. 即使在找到许多类似的主题后，我尝试这样做的尝试也没有成功（大多数建议内部内容都有min-height: 100%;。

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

    浏览器支持：IE9 +

4 个答案:

答案 0 :(得分：3)

CSS3和flex

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

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

#container {
  overflow-y: auto;
  flex: 1;
  background: gold;
}
＆＃13; 
<h1>Hello</h1>

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

CSS和display table / row

＆＃13;
＆＃13; 
* { 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果标题的高度为已修复，则可以使用支持IE9 +的CSS calc()。假设标题为height: 20px;，则内容将为height: calc(100% - 20px); + overflow-y: auto;，以便滚动溢出。

jsfiddle

＆＃13;
＆＃13; 
html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: lime;
    height: 20px;
}
#content {
    background: teal;
    height: calc(100% - 20px);
    overflow-y: auto;
}
＆＃13; 
<div id="header">header</div>
<div id="content">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

有几种方法可以做到这一点。一个简单的方法就是：

将h1固定高度说32px。 （更好的是包装它并给包装器一个固定的高度）。然后容器的高度为calc(100% - 32px)。您的overflow: hidden上的html,body和容器上的overflow: auto也是如此。

这是你的小提琴：http://jsfiddle.net/abhitalks/Sa6cb/285/

另一种方法是使用@Roko所示的flex。

答案 3 :(得分：0)

试试this one。在容器内创建标题div。现在你有两个区域。给每个最大高度百分比。对于#navigation overflow:auto，您就完成了。

相关问题
最新问题