0

看看这个简单的页面：

<!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，因为当浏览器展开时，我也需要红色背景颜色来展开。

4

3 回答 3

2

将此添加到您的CSS

#outer {background-color:#ff0000; min-width: 500px;}
于 2012-04-04T16:20:22.713 回答
1

那是因为您的内部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/

于 2012-04-04T16:04:24.833 回答
-1

body { padding: 20px }

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

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

于 2012-04-04T15:58:53.957 回答