Html 当父级具有相对高度时，如何强制子级div上的滚动条？

我试图解决的问题非常简单，但我发现使用CSS技术很难实现我想要的

我想要的是有某种父级

div

，高度设置为相对值（比如：100%或30%）。请不要问我为什么需要它，因为这只是一个部分，解释整个布局超出了这个问题

在这个父级中，我需要有一个标题

h1

，后面是包含大量文本的子级

div

和最重要的，我只需要在子div中有滚动条，这样标题将始终附着在容器顶部

标记：

<div class="wrapper">
    <h1>Test</h1>
    <div class="text">
        Lorem ipsum (... lots of text)
    </div>
</div>

试验
Lorem ipsum（…大量文本）

（非）工作小提琴： 你想实现什么？

HTML

<div class="wrapper">
     <div class="header">
          HEADER
     </div>
     <div class="content">
          Lorem ipsum (... lots of text)
     </div>
</div>

---

可以使用CSS3 properties calc（），如下所示：

html, body { height: 100% }
.wrapper {
    height: 30%;
    overflow: hidden;
    width: 400px;
    background-color: yellow;
}
h1 {height: 20px}
.text { 
  overflow: auto; 
  height:-webkit-calc(100% - 20px);
  height: -moz-cale(100% - 20px);
  height: -ms-cale(100% - 20px);
  height: -o-cale(100% - 20px);
  height: cale(100% - 20px);
}

您需要定义标题的高度。

---

如果您想知道calc（）方法的用法，可以单击。

效果看起来不错。我会试着把它放到我的上下文中，看看它是否同样有效是的，它有效。我肯定我以前试过，但可能是布局中的其他原因导致了失败。上周是漫长的一周：）另一个回答更准确，但CALC solution为+1！美好的我想你的小提琴可能坏了。

html, body { height: 100% }
.wrapper {
    height: 30%;
    overflow: hidden;
    width: 400px;
    background-color: yellow;
}
h1 {height: 20px}
.text { 
  overflow: auto; 
  height:-webkit-calc(100% - 20px);
  height: -moz-cale(100% - 20px);
  height: -ms-cale(100% - 20px);
  height: -o-cale(100% - 20px);
  height: cale(100% - 20px);
}