CSS-制作外部<；部门>；扩展到内部的背景<；部门>；宽度_Css_Background_Expand

CSS-制作外部<；部门>；扩展到内部的背景<；部门>；宽度

css

CSS-制作外部<；部门>；扩展到内部的背景<；部门>；宽度,css,background,expand,Css,Background,Expand,请看这个简单的页面： <!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;}

请看这个简单的页面：

<!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>


正文{padding:20px；}
#外部{背景色：#ff0000；}
#内部{宽度：500px；边框：1px实心#0000ff；}
为什么地狱外分区bg颜色不扩展
为什么地狱外分区bg颜色不扩展
为什么地狱外分区bg颜色不扩展

当浏览器页面缩小到
宽度以下时（即本例中的

500px

），然后将浏览器页面向右滚动，您将看到内部div的右侧不再有红色背景：

您知道如何固定
外部
的背景，以使其永远不会缩小到
内部
宽度以下吗？（我仍然需要
外部div
背景扩展到全浏览器宽度，因此它不能设置为
宽度：500px；
）

编辑：换句话说，我希望看到外部div的红色背景色，以填充内部div的总500px宽度，而不是缩小到浏览器大小，使内部div的右侧没有红色背景。为了做到这一点，我不能简单地将外部div也设置为500px，因为当浏览器展开时，我也需要红色背景色来展开。
body{padding:20px}
导致您看到的问题。移除它可以防止你所说的“收缩”

例如：
这是因为您的内部
div
从外部div溢出，而没有使其展开。将
overflow:hidden
添加到外部
div
，将通过隐藏溢出的内部
div
部分来防止发生这种情况
您可以在此处看到该行为的演示：
有关CSS溢出属性的更多信息，请参见此处：
编辑：要在内部div上保留背景色，请参见此示例：
将其添加到css中

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

overflow:hidden
sinply使外部div进一步收缩，底部滚动条消失。我需要外部div背景来填充内部div，使其达到500px。我不希望底部的滚动条消失。@MarcoDemaio，你的内部
div
溢出了外部
div
大小。如果内部div溢出，则无法使用外部
div
背景填充内部
div
。也许你想要更像这样的东西？@Temo Marques：请注意，你的示例在JSFIDLE中工作，但在真正的浏览器中不工作！！！如果在浏览器页面中复制并粘贴代码并进行测试，您将看到它不像JSFIDLE那样显示。测试了I7/IE8和Safari5。您只是简单地添加了
width:100%
，这是不需要的，因为
outer div
已经是
width:100%
，在JSFIDLE上它工作可能是因为它在
iframe
中显示内容。实际上，它之所以有意义，是因为它被称为jsfiddle，而不是cssfiddle。正确的答案是
minwidth
@MarcoDemaio，在jsFiddle外的chrome18中测试并工作。在fiddle中定义的代码不应该是您观察到的不同行为的原因，
iframe
与否，浏览器以相同的方式呈现HTML/CSS/JS。但我同意你的看法，
minwidth
提供了更好的解决方案。我没有意识到这一点，只是自己学到了一些东西；）这是完全错误的，身体填充与这个问题无关！