固定标题div与下面的可滚动div

Question

我试图将两个div放在另一个上面.顶部有一个固定的大小.底部需要填充页面高度的其余部分,如果内容太大则不会使页面更高.

<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 -->

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

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

100% - 30px

我更喜欢在纯CSS中执行此操作,但如果需要,我将使用javascript/jquery.

Answer 1

试试这个:

#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;
}

工作小提琴

Answer 2

如果有人想解决这个问题，让事情保持正常流程，现在可以使用Flexbox布局模型来完成，如下所示：

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#content {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
  margin: 0 auto;
  background-color: #C9E6FF;
}
#top-padding {
  height: 30px;
  flex: none;
  background: blue;
}
#stuff {
  flex: auto;
  overflow-y: auto;
  background-color: lightgreen;
}
/*for demo purpose */

#stuff p {
  height: 1000px;
}

<div id="content">
  <div id="top-padding"></div>
  <div id="stuff">
    <p>some content</p>
  </div>
</div>