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

Question

我试图解决的问题非常简单，但我发现使用我的 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/

Answer 1

这是您想要实现的目标吗？

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;
}

Answer 2

您可以使用 CSS3 属性 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);
}

您需要定义标题的高度。DEMO。如果想了解calc()方法的使用，可以点击这里。