Question

我的背景问题很简单（但很令人沮丧）。我目前将它作为静态背景图像和我的内容空间的纯色。由于某种原因，内容颜色没有出现？我觉得我已经完成了所有事情来解决它，但没有骰子。有什么建议吗？

body {
  margin-left:auto;
  margin-right:auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1;
  background-image:url(../img/bglogo.jpg);
  background-attachment:fixed;
}
#contentcontainer { 
  max-width: 960px; 
  margin: 0 auto; 
  float: none; 
  padding-top: 0px;
  padding-left:10px;
  background-color: #fffdf8;
}

有问题的网站可以在这里找到：http://mikesbaum.com/plan9alehouse/index.html

Answer 1

这是因为#contentcontainer（home，about等）的内容全部浮动，而你没有清除它。执行此操作时，父元素不会包装子元素。如果你查看#contentcontainer的高度，你会看到它被设置为0.

要解决此问题，您需要清除浮动部分。最快的方法是使用css #contentcontainer添加一个空div作为clear: both;中的最后一个孩子：

<section id='contentcontainer'>
 <section id='home'>...</section>
 ...
 ...
 <div style='clear: both;'></div>
</section>

通常，如果你发现自己清除浮动很多，大多数人会创建一个clear或clearfix类，只使用div的类名而不是使用内联css。

Answer 2

您正在使用Floats并排放置div。因此，父div在填充时无法访问这些div的高度。这使父div处于0px高度，使其在页面上不可见。

添加'overflow：auto;'到你的#contentcontainer类，你应该全部设置。

背景颜色重叠问题

2 个答案: