Html 固定标题div，下面有可滚动div

我试着把两个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 -->

我更喜欢用纯css来实现这一点，但如果必要的话，我会使用javascript/jquery。

试试这个：

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

---

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

*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
#内容{
显示器：flex；
弯曲方向：立柱；
宽度：300px；
身高：100%；
保证金：0自动；
背景色：#C9E6FF；
}
#顶衬{
高度：30px；
flex：无；
背景：蓝色；
}
#东西{
flex：自动；
溢出y：自动；
背景颜色：浅绿色；
}
/*用于演示目的*/
#材料p{
高度：1000px；
}

一些内容

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

html，
身体{
身高：100%；
}
身体{
保证金：0；
}
#内容{
高度：100vh；
位置：相对位置；
背景色：#C9E6FF；
保证金：0自动；
宽度：300px；
}
#顶衬{
背景：蓝色；
高度：30px；
}
#东西{
溢出-x：自动；
背景颜色：浅绿色；
高度：计算（100vh-30px）；
}

我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美…阿美

@SteveP:#stuff{overflow-x:auto；背景色：浅绿色；}尝试

高度：calc（100%-30px）与供应商prefixes@SteveP当前位置在你的小提琴中尝试我的解决方案。它有效。：-）
标签只是一种使内容大于可用空间的方法，可以强制显示滚动条。感谢您的css建议。它对我非常有效，谢谢。
#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;
}