使用静态标题创建动态大小的DIV框

我正在研究一种包含各种大小div的仪表板。高度和宽度目前是基于百分比的，每个div框的内容都是动态的。我需要创建描述框内容的好标题。使用静态标题创建动态大小的DIV框

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

有没有一种更简单的方法可以在div内获得完美大小的标题，还是更容易将它们放在小帽子之类的盒子上面。

这是非常接近我想要的，但标题滚动的内容！这真的很糟糕。

Create div with title header

Why is this so difficult?

这就是我想要的，喜欢的玩意儿一个小部件，描述它自己的内容。

这里有一个小提琴是已经非常接近我想

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

但位置绝对完全覆盖这么多的事情......

来源

2012-06-04 Will Meldon

什么是你的标记？你在和什么工作？你有什么尝试？ –

尝试使用标题div和body div制作容器div。你可以设置溢出到身体，同时保持头静态。 –

我把这个演示到一起之前的问题是编辑以包括链接到演示，所以这是第一次迭代，虽然在查看链接演示之后，看起来标记相当接近：

<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默认为display: block）;这意味着它保持在文档流程中的位置。

它的同胞.dashContent，元件能够滚动，因为它有两个规则，首先是max-height防止垂直生长，以适应其派生元素（多个）元件和第二是overflow-y（其在某些浏览器需要overflow-x也被设置，因此上述），这允许.dashContent的内容滚动。

来源

2012-06-04 14:15:44

这是我正在寻找的东西。但我不知道它为什么有效。如果你愿意给我一个简短的解释，说明为什么标题能够如此奇迹般地保持原位，这将非常有帮助。复制/粘贴SO代码不会让我成为更好的程序员。 –

我*尝试*提供一个简短的解释;但我不确定你卡在哪里。尽管努力去理解的荣誉！当然，如果您还有其他问题，请随时提问，我会尽力而为。 =） –

这花了我两个读，但覆盖它。这很简单，它对我来说没有意义。 CSS是我存在的祸根。感谢您协助我与样式表的无休止的战斗。 –

使用静态标题创建动态大小的DIV框

回答

相关问题