Question

我有一个调整滚动div来填充窗口的问题，考虑到我有一个或多个顶部div和一个页脚div。

this is what I need

+------------------+    +------------------+    +------------------+
|      top1        |    |      top1        |    |      top1        |
+------------------+    +------------------+    +------------------+
|      top2        |    |      top2        |    |                |^|
|                  |    +------------------+    |                | |
+------------------+    |                |^|    |                | |
|                |^|    |                | |    |      scroll    | |
|                | | => |      scroll    | | => |                | |
|      scroll    | |    |                | |    |                | |
|                | |    |                | |    |                | |
|                | |    |                | |    |                | |
|                |v|    |                |v|    |                |v|
+------------------+    +------------------+    +------------------+
|      footer      |    |      footer      |    |      footer      |
+------------------+    +------------------+    +------------------+

Top1 有一个固定的高度。

页脚具有固定的高度。

Top2 没有固定的高度，有时甚至不会出现。

我知道这样做的唯一方法是定义容器高度，固定其顶部和底部。但我无法修复top属性，因为top2 div具有可变高度......

有人可以帮助我吗？

HTML：

<body>
    <div id='top1'>Top1</div>
    <div id='top2'>Top2</div>
    <div id='container'>
       <ul id='data'>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          <li>item4</li>
          <li>item5</li>
          <li>item6</li>
          <li>item7</li>
          <li>item8</li>
          <li>item9</li>
          <li>item10</li>
       </ul> 
    </div>
    <div id="footer">footer</div>
</body>

的CSS：

body, html {
    height: 100%;
}

#top1 {
    width: 100%;
    height: 50px;
    background-color: #EEE;
    text-align: center;
    line-height: 50px;
}

#top2 {
    width: 100%;
    height: 50px;
    background-color: #DDD;
    text-align: center;
    line-height: 50px;
}

#footer {
    width: 100%;
    height: 50px;
    background-color: #BBB;
    text-align: center;
    line-height: 50px;
    position: fixed;
    bottom: 0;
}

#container {
    overflow: auto;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 50px;
}

#data li {
    font-size: 30px;
    padding: 10px;
}

Answer 1

试试吧

首先通过此功能获取窗口高度 $（窗口）.height（）;
并为top2再做一个功能 $（document）.height（）;
高峰第1个标题+第2个标题+ .3rd top2（通过此函数获取$（文档）.height（）;）
减去窗户高度的高度
然后将获得新的身高并申请scrlloing div
为了更好的scrlloing使用调整大小功能还有一件事

div +滚动+固定底部+变量顶部

1 个答案: