CSS - 使外部 <div> 背景扩展到内部 <div> 宽度答案

【问题标题】：CSS - Make outer <div> background to expand to inner <div> widthCSS - 使外部 <div> 背景扩展到内部 <div> 宽度
【发布时间】：2012-04-04 15:52:18
【问题描述】：

看看这个简单的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <style type="text/css">
      body {padding:20px;}
      #outer {background-color:#ff0000;}
      #inner {width:500px; border:1px solid #0000ff;}   
   </style>
</head>
<body>
   <div id="outer">
      <div id="inner">
         <p>Why the hell outer div bg color does not expand?</p>
         <p>Why the hell outer div bg color does not expand?</p>
         <p>Why the hell outer div bg color does not expand?</p>
      </div>
   </div>
</body>
</html>

当浏览器页面缩小到<div id="inner">的宽度以下（即本例中的500px）并且然后您将浏览器页面向右滚动，您将看到内部 div 的右侧不再有红色背景了：

你知道如何修复outer <div>的背景，使其永远不会缩小到inner <div>的宽度以下吗？？？（我仍然需要outer div背景来扩展到完整的浏览器宽度，所以它也不能设置为width:500px;）。

编辑： 换句话说，我希望看到外部 div 的红色背景色来填充内部 div 的总 500px 宽度，而不是缩小到浏览器大小，离开右侧没有红色背景的内部 div。为了做到这一点，我不能简单地将外部 div 设置为 500px，因为当浏览器展开时，我也需要红色背景颜色来展开。

【问题讨论】：

标签： css background expand

【解决方案1】：

将此添加到您的 css 中

#outer {background-color:#ff0000; min-width: 500px;}

【讨论】：

【解决方案2】：

那是因为你的内部 div 从外部 div 溢出，并没有使其扩展。将overflow: hidden 添加到您的外部div 将通过隐藏内部div 溢出的部分来防止这种情况发生。

您可以在此处查看该行为的演示：http://jsfiddle.net/p6BQg/

更多关于 CSS 溢出属性的信息在这里：http://www.w3schools.com/cssref/pr_pos_overflow.asp

编辑：要保持内部 div 的背景颜色，请参阅此示例：http://jsfiddle.net/p6BQg/1/

【讨论】：

overflow:hidden sinply 让外层 div 进一步缩小，底部滚动条消失。我需要外部 div 背景将内部 div 填充到 500px。我不希望底部滚动条消失。
@MarcoDemaio，您的内部div 溢出了外部div 大小。如果您的内部 div 溢出，则不能用外部 div 背景填充内部 div。也许你想要更多类似jsfiddle.net/p6BQg/1 的东西？
@Temo Marques：请注意，您的示例在 jsfiddle 中有效，但在真实浏览器中无效！！！如果您将代码复制并粘贴到浏览器页面中并进行测试，您将看到它不像 jsfiddle 那样显示。测试 I7/IE8 和 Safari5。您只是添加了width:100%，这是不需要的，因为outer div 已经是width:100%，在jsfiddle 上它可以工作可能是因为它在iframe 中显示内容。实际上它是有道理的，因为它被称为 jsfiddle 而不是 cssfiddle。正确答案是min-width。
@MarcoDemaio，在 jsFiddle 之外的 Chrome 18 中进行了测试并且可以正常工作。在小提琴中定义的代码不应该是您观察到的不同行为的原因，iframe 与否，HTML/CSS/JS 由浏览器以相同的方式呈现。但我同意你的看法，min-width 提供了更好的解决方案。我不知道这样的属性，只是自己学到了一些东西；）

【解决方案3】：

body { padding: 20px }

导致您看到的问题。删除它将防止您所说的“缩小”。

例如：http://jsfiddle.net/MvJTa/

【讨论】：

这是完全错误的，body padding 与这个问题无关！