固定标题div与下面的可滚动div [英] fixed header div with scrollable div below

问题描述

我想把两个div放在另一个上面。顶部有一个固定的大小。底部的一个需要填充剩余的页面高度，如果内容太大，则不会使页面更高。

 < ; div id =content> 
< div id =top-padding>< / div> 
< div id =stuff> 
某些内容
< br>< br>< br>< br>< br>< br>< br>< br>< br> 
< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br& br>< br> 
< br>< br>< br>< br>< br>< br>< br>< br& 
内容结束。 
< / div> 
< / div><！ -  content  - > 
  

我的尝试到目前为止： http://jsfiddle.net/b4fEE/

我遇到的问题是绿色div太大了。我需要指定它的高度为

  100％ -  30px 
  pre> 
 
 
我希望在纯CSS中执行此操作，但如果需要，我将使用javascript / jquery。
解决方案
尝试：
  #stuff {
 overflow-x ：汽车; 
 background-color：lightgreen; 
 top：30px; / * as the height of the other div is 30px * / 
 left：0; 
右：0; 
 bottom：0; 
 position：absolute; 
} 
  
  工作小提琴  
 
I'm trying to place two divs one above the other. The top one has a fixed size. The bottom one needs to fill the rest of the page height, without making the page higher if it's content is too big.
<div id="content">
    <div id="top-padding"></div>
    <div id="stuff">
        some content
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
        End of content.
    </div>
</div><!-- content -->
My attempt so far is: http://jsfiddle.net/b4fEE/

The problem I have is that the green div is too big. I need as way to specify it's height as
100% - 30px
I'd prefer to do this in pure css, but I will resort to javascript/jquery if necessary.
解决方案
Try this:
#stuff {
   overflow-x:auto;
   background-color: lightgreen;
   top:30px;  /* as the height of the other div is 30px */
   left:0;
   right:0;
   bottom:0;
   position:absolute;
}
Working Fiddle

                        
这篇关于固定标题div与下面的可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！