Html 使下面的div展开到底部，然后滚动

我有下面的设计

如何使橙色div从头部到底部展开，然后在内容较大时滚动，但同时保持页脚在页面底部

---

我尝试将div定位为

position:absolute

，底部：页脚高度

和
overflow-y:scroll
，但如果我这样做，它会与页眉重叠。
我理解，页眉应该与页脚一起滚动，所以最简单的解决方法是：给fotter
位置：fixed
和
bottom:0
和div应用
边距底部：X
，其中X是页脚的高度。
我理解，页眉应该与页脚不同，与页面一起滚动，因此，最简单的解决方案是：给fotter
位置：fixed
和
bottom:0
和div应用
边距底部：X
，其中X是页脚的高度。
您可以将
页眉和
页脚元素分别设置为
位置：fixed
。从这里开始，您只需将
padding top
和
padding bottom
添加到中心内容div中，以使其中的内容不会重叠。试试这个：

<header></header>
<div id="content"></div>
<footer></footer>

您可以将
页眉
和
页脚
元素设置为
位置：分别固定在顶部和底部。从这里开始，您只需将
padding top
和
padding bottom
添加到中心内容div中，以使其中的内容不会重叠。试试这个：

<header></header>
<div id="content"></div>
<footer></footer>

你需要这样的东西吗


body{text align:center}
.header{位置：固定；顶部：0；左侧：0；右侧：0；高度：50px；背景：橙色；颜色：白色；}
.content{框大小：边框框；最小高度：200vh；顶部填充：50px；底部填充：50px；}
.footer{位置：固定；底部：0；左侧：0；右侧：0；高度：50px；背景：红色；颜色：白色；}
标题
内容
页脚
你需要这样的东西吗


body{text align:center}
.header{位置：固定；顶部：0；左侧：0；右侧：0；高度：50px；背景：橙色；颜色：白色；}
.content{框大小：边框框；最小高度：200vh；顶部填充：50px；底部填充：50px；}
.footer{位置：固定；底部：0；左侧：0；右侧：0；高度：50px；背景：红色；颜色：白色；}
标题
内容
页脚
我想我知道你需要什么


#H，#B，#F{
寡妇：100%；
颜色：黑色；
文本对齐：居中；
}
#H{
背景：橙色；
高度：100px；
位置：绝对位置；
排名：0；
左：0；
右：0；
}
#B{
背景：白色；
位置：绝对位置；
底部：100px；
顶部：100px；
左：0；
右：0；
溢出y：滚动；
}
#F{
背景：灰色；
高度：100px；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
标题

<<
<
<

页脚
我想我知道你需要什么


#H，#B，#F{
寡妇：100%；
颜色：黑色；
文本对齐：居中；
}
#H{
背景：橙色；
高度：100px；
位置：绝对位置；
排名：0；
左：0；
右：0；
}
#B{
背景：白色；
位置：绝对位置；
底部：100px；
顶部：100px；
左：0；
右：0；
溢出y：滚动；
}
#F{
背景：灰色；
高度：100px；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
标题

<<
<
<

页脚
您要查找的功能是“固定页眉和固定页脚，可滚动div”，对吗？@FurkanOrhan确切地说，您要查找的功能是“固定页眉和固定页脚，可滚动div”，对吗？@FurkanOrhan确切地说