html - 我的标题 div 不会滚动

Question

您好，我的标题有问题，位置似乎已固定，无法滚动。

     header.masthead {
     position: initial;
     width: 100%;
     min-height: auto;
     text-align: center;
     color: white;
     overflow:scroll;
     background-position: center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; }"

Answer 1

如评论中所述，您应该设置 div 的高度。你可以用像素、ems 或其他东西来设置它。如果没有指定高度，您的内容只会放大标题，而不会滚动。

Test live, version 1

Test live, version 2, better

另外，看看最小高度和最大高度。

<header class="masthead">
     <p>I'm a header</p>
     <p>I'm a header</p>
     <p>I'm a header</p>
     <p>I'm a header</p>
     <p>I'm a header</p>
</header>

<style>
header.masthead {
     position: initial;
     width: 100%;
     min-height: auto;
     text-align: center;
     color: red;
     overflow: scroll;
     background-position: center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     height: 3em;
}

header.masthead p {
     margin: 0;
}
</style>