CSS HTML溢出问题，静态标题处于换行状态

从小提琴中可以看出，我正在努力处理溢出内容的底部部分。在保持布局的同时，您将如何着手修复此问题

CSS:

HTML:

这是一个标题

您的wrappedbody具有100%的高度，这是其父wrapper的100%。然而，wrapper有两个子项，wrappedbody和wrappedheader。包裹体的高度应为包裹体的高度减去包裹头的高度：

.wrappedbody {
    position: relative;
    overflow-y: auto;
    height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/
    padding: 15px;
}

---

以什么方式挣扎？您是否试图使滚动条完全可见？如果是这样的话，答案是谢谢，这就成功了。编辑：不知道我是否理解，为什么我们要精确减去61px？难道没有一种更可靠的方法不使用可以工作的计算吗？填充。15px乘以4。另见@feichsim的答案。我得走了，对不起，谢谢。问题是标题高度在我的问题中是动态变化的，所以我不知道它的高度。然后将高度约束从wrapper移动到wrappedbody wrappedbody div也将具有动态高度，但我想我现在可以使用它。谢谢等待如果您不想担心与旧浏览器的兼容性，请查看CSS的一个更酷的新功能。（更新的演示：）非常酷。我认为这正是我所需要的，尽管复制粘贴演示解决方案为我的真实问题提供了一些奇怪的结果。我会仔细阅读的，再次感谢！

<div class="wrapper">
  <div class="wrappedheader">
    This is a header
  </div>

  <div class="wrappedbody">
    <!-- Content causing overflow-y -->
  </div>

</div>

.wrappedbody {
    position: relative;
    overflow-y: auto;
    height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/
    padding: 15px;
}