如何在不定义像素高度的情况下使用背景颜色填充标题？

Question

我正在玩一个响应式设计，想要知道如何用背景颜色填充标题而不定义像素高度 - 我通常会这样做但是没有响应。

我的演示示例就在这里，你可以看到我试图用黄色填充标题

Answer 1

1）header{overflow: hidden;}
2）

header:after{
    content:'';
    display:block;
    clear:both;
    }

Answer 2

这可以解决问题，但您也可以考虑添加一些填充：

header {
  background-color: #FABA1A;
  overflow: hidden;
}

Answer 3

你正在使用浮动到子元素，所以你需要使用clearfix技术清除它们，你可能会谷歌。

您可以使用overflow:hidden;来获得快速而好的解决方案

header {
    background-color: #faba1a;
    overflow: hidden;
}

Answer 4

您可以不设置像素化高度设置百分比（当然，您必须将相同的div设置为绝对定位）。

div {
 height: 10%;
 position: absolute;
}

Answer 5

添加规则

header {float: left;}

问题是你的div的内容都是浮动的，因此它会折叠到0高度。你也可以通过浮动容器来解决这个问题。取决于你想要添加的其他内容。