background-color不会扩展到整个元素

Question

＆＃13;

＆＃13;

This is my CSS code:
#outer {
  width:580px;
  padding:10px;
  float:left;
}
  .inner {
  width:560px;
  padding: 10px;
  background-color:#fff;
  color:#666666;
}

＆＃13;

And the HTML:
<div id="outer">
  <div class="inner">
  	... a lot of content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13; 我的问题是内部div的背景颜色不会扩展以填充整个div及其内容。我经常遇到这个问题，我的解决方案通常是指定#inner的高度，这会使背景填充#inner。但是，我不想明确指定高度，因为它是动态内容。我应该怎么做才能使背景颜色在扩展时填充div？

Answer 1

我无法复制你的问题。如果你没有为＆＃39; .inner＆＃39;指定高度，背景颜色应该动态扩展为＆＃39; .inner＆＃39;充满内容。

由于缺少CSS重置，您可能会遇到问题。除非您覆盖这些规则，否则每个浏览器都有一组适用于所有页面的标准css规则。

我建议您在上面所有当前的CSS中添加CSS重置。 一个非常基本但受欢迎的重置是Eric Meyer，在这里找到：http://meyerweb.com/eric/tools/css/reset/

如果有帮助，请告诉我，如果没有，请尝试发布您正在体验的图片。

顺便说一下，这就是你的代码为我呈现的方式：

Answer 2

设置每个元素的位置，内部元素必须是绝对的，然后告诉内部div始终用高度填充外部元素：100％。你必须要特别注意的是，将内部的位置设置为绝对会使它忽略浮动，但可能你会用外部来处理它。

（我在这个答案中将背景颜色更改为红色，以便更明显地发生了什么。）

This is my CSS code:
#outer {
  position: relative;
  width:960px;
  height: 500px;
}
.inner {
  position:absolute; 
  height:100%;
  width:400px;
  background-color: red;
}

And the HTML:
<div id="outer">
  <div class="inner">
  	... a lot of content
  </div>
</div>

Answer 3

外部元素的填充将始终显示外部元素的背景颜色......

只需删除那里的填充。

#outer {
  width:580px;
  /* padding: 10px;*/
  background:red;
  border:1px solid green;
}
  .inner {
  width:560px;
  padding: 10px;
  background-color:lightblue;
  color:#666666;
}