Html CSS布局：固定内容中的页眉/页脚和子页眉

我正在开发一个web应用程序，希望具有以下布局：

<div class="wrapper">
  --header--
  <div class="header">
  </div>
  --body--
  <div class="content">
     --header within body--
     <div class="sub-header">
     </div>
     ---scrollable content-
     <div class="scrollable-content">
     </div> 
  </div>
  --footer--
  <div class="footer">
  </div>
</div>

--css---
.wrapper {
 display: flex;
 flex-direction: column;
 height: 100vh;
}

.header {
 flex: 0 0 auto;
}

.content {
 overflow-y:scroll;
 flex: 0 1 auto;
}

--标题--
--身体--
--正文中的标题--
---可滚动内容-
--页脚--
--css---
.包装纸{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.标题{
flex:0自动；
}
.内容{
溢出y：滚动；
flex:01自动；
}

我想用scroll将剩余的高度指定给“scrollable content”div。我遇到了一些答案，其中整个内容都是可滚动的，但这里不是这样

任何帮助都会很好

---

谢谢。

这里我使用了速记css属性

flex

来确定每个

的高度，并设置

溢出：滚动。因此，其他元素不会在该元素溢出时滚动


.wrapper{
边框：1px红色实心；
高度：300px；
显示器：flex；
弯曲方向：立柱；
柔性包装：无包装；
}
.标题{
边框：1px红色实心；
flex:0.2；
}
.内容{
边框：1px红色实心；
弹性系数：0.6；
显示器：flex；
弯曲方向：立柱；
柔性包装：无包装；
}
.副标题{
边框：1px红色实心；
弹性系数：0.15；
}
.可滚动内容{
边框：1px红色实心；
弹性系数：0.85；
溢出：滚动；
}
.页脚{
边框：1px红色实心；
flex:0.2；
}

--标题--
--正文中的标题--
---可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--

--页脚--
在这里，我使用速记css属性
flex
来确定每个
的高度，并设置
溢出：滚动。因此，其他元素不会在该元素溢出时滚动


.wrapper{
边框：1px红色实心；
高度：300px；
显示器：flex；
弯曲方向：立柱；
柔性包装：无包装；
}
.标题{
边框：1px红色实心；
flex:0.2；
}
.内容{
边框：1px红色实心；
弹性系数：0.6；
显示器：flex；
弯曲方向：立柱；
柔性包装：无包装；
}
.副标题{
边框：1px红色实心；
弹性系数：0.15；
}
.可滚动内容{
边框：1px红色实心；
弹性系数：0.85；
溢出：滚动；
}
.页脚{
边框：1px红色实心；
flex:0.2；
}

--标题--
--正文中的标题--
---可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--
--可滚动内容--

--页脚--
我们可以查看您的css代码吗？您在可滚动内容和固定高度中尝试过自动溢出吗？请看这里-@Sfili_81，请检查更新的csscan我们看到您的css代码了吗？您是否在可滚动内容和固定高度中尝试过自动溢出？请查看此处-@Sfili_81，请检查更新的cssI，仅在可滚动内容中使用滚动。我发现您的代码片段中有两个卷轴。您能检查一下吗？外部滚动条来自stackoverflow，因为我有固定高度的
.wrapper
，它大于结果显示区域。如果你只是把代码放在你想要的地方，并设置高度：100%
到
.wrapper
，它将正常工作。@Jayakrishnan您只想滚动而不想滚动内容我只想滚动可滚动内容。我发现您的代码片段中有两个卷轴。您能检查一下吗？外部滚动条来自stackoverflow，因为我有固定高度的
.wrapper
，它大于结果显示区域。如果你只是把代码放在你想要的地方，并设置高度：100%

到

.wrapper

，它就可以正常工作了。@Jayakrishnan您想只滚动而不滚动内容吗