Question

enter code here我有以下html / php：

<div class="footerbottom">
<span class="footermenuitem">
<span class="footermenutitle">PRODUCTS</span>
<?php $menu = menu_navigation_links('menu-products');
print theme('links__menu_products', array('links' => $menu)); ?>
</span>

<span class="footermenuitem">
<span class="footermenutitle">APPLICATIONS</span>
<?php $menu = menu_navigation_links('menu-applications');
print theme('links__menu_applications', array('links' => $menu)); ?>
</span>

<span class="footermenuitem">
<span class="footermenutitle">BRANDS</span>
<?php $menu = menu_navigation_links('menu-brands');
print theme('links__menu_brands', array('links' => $menu)); ?>
</span>

</div>

以下CSS：

.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
z-index: 3;
margin-top: 200px;
}
.footerbottom ul {
list-style: none;
}
.footerbottom li a {
color: #cccccc;
}
.footerbottom li a:link {
color: #cccccc;
}
.footerbottom li a:visited {
color: #cccccc;
}
.footerbottom li a:hover {
color: #cccccc;
}
.footerbottom li a:active {
color: #cccccc;
}
.footermenutitle {
font-size: large;
color: #fdbe6e;
}
.footermenuitem {
float: right;
margin-right: 20px;
}

出于某种原因，所有这一领域的背景都不是灰色的。这是为什么？我该如何解决这个问题？

Answer 1

问题是您的.footerbottom包含浮动元素，因此您需要清除它们，为overflow: hidden;

声明footerbottom属性

.footerbottom {
   background-color: #2b2b2b;
   color: #cccccc;
   width: 100%;
   z-index: 3;
   margin-top: 200px;
   overflow: hidden;
}

Demo

嗯，这是一个快速修复，但不是更好，如果你不想支持旧的IE版本，如果你想，在父元素上使用clearfix类来自我清除..

.clear:after {
   content: "";
   clear: both;
   display: table;
}

<div class="footerbottom clear">
   <!-- ... Other code -->
</div>

Demo 2

有关此行为的详情，请参阅我的答案here和here

Answer 2

添加高度：

.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
height: 200px
z-index: 3;
margin-top: 200px;
}

没有得到灰色背景

2 个答案: