固定标题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;
}

<强> Working Fiddle

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果有人想要解决这个问题，保持正常流程并且不使用flex，那么解决方案如下：

html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    #content {
        height: 100vh;
        position: relative;
        background-color: #C9E6FF;
        margin: 0 auto;
        width: 300px;
    }

    #top-padding {
        background: blue;
        height: 30px;
    }

    #stuff {
        overflow-x:auto;
        background-color: lightgreen;
        height: calc(100vh - 30px);
    }

<div id="content">
    <div id="top-padding"></div>
        <div id="stuff">
            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
       </div>
   </div>