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>

(不)工作小提琴：
http://jsfiddle.net/CodeConstructors/BEVSS/

解决方法

你想要实现 this的东西吗？
HTML

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

CSS

html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.wrapper {
    width: 400px;
    height: 100%;
    background-color: #fec;
    margin: auto;
    position: relative;
}
.header {
    height: 40px;
    background-color: green;
    color: #fff;
}
.content {
    position:absolute;
    bottom:0px;
    top: 40px;
    width:100%;
    overflow: auto;
    background-color: #333;
    color: #666;
}

原文地址：https://www.jb51.cc/html/227647.html