Question

我将我的页脚标记拆分为2个单独的标记，1个是免责声明，另一个是联系，但子标记不会继承我想要设置的背景颜色。

<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
</div>
<div class="contact">
</div>
</footer>  



footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: block;
 /*border-radius: 0px 0px 10px 10px ;*/
}

.disclaimer {
float: left;
color: white;
max-width: 50%;
}

.contact {

color:white;
float:right;
text-align: left;
padding-right: 20px;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
max-width: 50%;
}

感谢您的帮助

块引用

Answer 1

实际上，背景颜色显示在您的子div中，但由于您在其中使用float，并且没有在页脚上设置特定高度，因为浮动元素，页脚的高度为0不要展开父容器。至少不适用于block元素。除非您设置了不同的display属性，例如display: table。

所以将您的页脚类更改为：

footer {
   color: #FFF8BF;
   width: 100%;
   padding:0 px;
   background-color: #1C1C1C;
   margin-top: 0px;
   margin-bottom: 0px;
   bottom: 0;
   display: table;                          // <---- change this to table instead of block
  /*border-radius: 0px 0px 10px 10px ;*/
}

Answer 2

Background color property cannot be inherited

您可以通过在关闭页脚标记

之前在代码中添加它来实现您想要的效果

<br style='clear:both'></footer>

Answer 3

目前您没有高度，因为content和disclaimer为空

如果您使用overflow:auto;添加footer，它就会有效。尝试提供width和height。另外，对于测试，您始终可以添加border: 1px solid red;或其他内容

编辑：现在代替max-width使用width或min-width与max-width一样，最大宽度将是50％是但是它可以是0％，因为它是在这种情况下

Answer 4

要么设置页脚的height：

<强> CSS

footer {
    min-height: 100px;
}

或者您可以将内容插入到页脚的子项中，并为页脚设置overflow:auto属性

<强> HTML

<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
    Sample content
</div>
<div class="contact">
    Sample content
</div>
</footer>

<强> CSS

footer {
    overflow: auto;
}

以下是Fiddle的示例。

背景颜色不会继承到子标签中

4 个答案: