Question

我有这样的事情：

<section>
    <h3>Header:</h3>
    <p>My text which could span over several lines.</p>
</section>

section
{
    background: #5E5E5E;
    overflow:hidden;
}

h3
{
    background: #B31B1B;
    padding: 13px;
    width: 174px;
    float:left;
}

p
{
    margin: 13px 13px 13px 213px;
}

我希望标题背景扩展到该部分的底部，但是当<p>标记中的文本超过一行时，它不会。

除了使用人造柱技术，我还能做些什么？

Answer 1

你绝对可以放置<h3>而不是浮动它。像这样：

section {
    background: #5E5E5E;
    position: relative;
    overflow: hidden;
}

h3 {
    background: #B31B1B;
    padding: 13px;
    width: 174px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

p {
    margin: 13px 13px 13px 213px;
}

实例：http://jsfiddle.net/ambiguous/cZ3rh/

如果<h3>最终比<h3>更高，绝对定位<p>可能会造成麻烦，因为绝对定位的元素对父母的身高没有贡献：

http://jsfiddle.net/ambiguous/NQB4n/

我现在想不出这个案例的合适解决方案。

Answer 2

您可以将背景应用于section而不是h3吗？

Answer 3

另一种方法是将背景移至SECTION和P标记。

section {
    background: #B31B1B;
    overflow:hidden;
    padding: 0;
}

h3 {
    padding: 13px;
    width: 174px;
    float:left;
}

p {
    margin: 0;
    background: #5E5E5E;
    padding: 13px;
    margin-left: 213px;
}

http://jsfiddle.net/pEfGq/

Answer 4

尝试在h3中使用min-height = 100％！

Answer 5

只需将h3元素的高度设置为100％。

h3
{
      background: #B31B1B;
      padding: 13px;
      width: 174px;
      float:left;
      height: 100%;
}

设置元素高度以扩展到父级的高度

5 个答案: