在编辑问题以包含指向演示的链接之前,我将这个演示放在一起,所以这是第一次迭代,尽管在查看链接的演示之后,标记似乎相当接近:
<div class="dashWrap">
<h2>header</h2>
<div class="dashContent">
<p><!-- content --></p>
</div>
</div>
以下 CSS 似乎可以满足您的要求:
.dashWrap {
width: 50%;
margin: 0 auto 1em auto;
}
.dashWrap h2 {
background-color: #ffa;
border: 2px solid #000;
border-radius: 0.5em 0.5em 0 0;
text-indent: 0.5em;
}
.dashWrap .dashContent {
max-height: 5em;
overflow-x: hidden;
overflow-y: auto;
border: 2px solid #000;
border-top-color: transparent;
}
JS 小提琴演示。
编辑了来自 OP 的以下问题(在评论中):
...我不知道它为什么起作用。如果您愿意给我一个简短的解释,说明为什么标题如此神奇地保持在原位,那将非常有帮助。
保持“原位”的原因h2
很简单,因为我没有移动它,也没有改变它的默认display
行为(h2
默认为display: block
);这意味着它保留在文档流中的位置。
它的兄弟.dashContent
元素 , 元素能够滚动,因为它有两个规则,第一个是max-height
防止元素垂直增长以容纳其后代元素,第二个是overflow-y
(在某些浏览器中overflow-x
也需要设置,因此上面),它允许.dashContent
滚动的内容。