修复了div崩溃页面滚动

Question

我的 html 中有一个固定的 div ，问题是如果那个 div我无法滚动 已修复。

这是 jsfiddle ：https://jsfiddle.net/y0kobkny/

HTML

<div class="head">
<div class="head_content"></div>
<br/>
<br/>
<br/>
<br/>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>
<p>yfjhgukjhkh</p>

CSS

.head {
    background-color:rgba(0, 0, 0, 0.72);
    width: 100%;
    height: 10%;
    position:fixed;
    background-repeat: repeat;
    z-index:10;
}

Answer 1

检查此 jsFiddle

在CSS中，您的班级名称应为 .head_content ，而不是 .head ，

.head_content {
    background-color:rgba(0, 0, 0, 0.72);
    width: 100%;
    height: 10%;
    position:fixed;
    background-repeat: repeat;
    z-index:10;
}

Answer 2

试试这个......

.head {
    background-color:rgba(0, 0, 0, 0.72);
    width: 100%;
    height: 50%;//change it
    position:fixed;
    background-repeat: repeat;
    z-index:10;
    overflow-y: scroll;//add this line
}

演示：http://jsfiddle.net/u6r0xpLj/

Answer 3

如果你想要标题部分应该滚动意味着像这样使用： Demo

<强> CSS：

.head {
    background-color:rgba(0, 0, 0, 0.72);
    width: 100%;
    height: 10%;
    position:fixed;
    background-repeat: repeat;
    z-index:10;
    overflow:auto;
}