使用静态标头创建动态大小的DIV盒

Question

我正在开发一种包含各种尺寸div的仪表板。高度和宽度目前是基于百分比的，每个div框的内容是动态的。我需要创建描述框内容的漂亮标题。

标题目前在框内。当涉及溢出时，这会导致许多问题，并使内部内容的间隔变得烦人。

是否有一种更简单的方法可以在div中获得完美大小的标题，或者更容易将它们放在盒子顶部，就像小帽子一样。

这非常接近我想要的但是标题滚动内容！那真是太可怕了。

Create div with title header

这就是我想要的，一个描述它自己内容的装置，如装置。

这是一个非常接近我想要的小提琴

http://jsfiddle.net/exrXR/1019/

但绝对位置完全取代了很多东西......

Answer 1

我在编辑问题之前将此演示放在一起以包含演示的链接，所以这是第一次迭代，但在查看链接的演示后，似乎标记相当接近：

<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 Fiddle demo

---

编辑以下问题来自OP（评论中）：

  

......我不知道为什么会这样。如果你非常友好地给我一个简短的解释，为什么标题会如此奇迹般地存在，这将是非常有帮助的。

h2保持'到位'的原因很简单，因为我没有移动它，或者更改了默认的display行为（h2默认为{{ 1}}）;这意味着它仍然保留在文档流程中。

它的兄弟display: block元素能够滚动，因为它有两个规则，第一个是.dashContent，它阻止元素垂直增长以容纳其后代元素，第二个是max-height（在某些浏览器中也要求设置overflow-y，因此也是如此），它允许overflow-x的内容滚动。