Question

看看这个简单的页面：

<!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的右侧不再具有红色背景：

enter image description here

你知道如何修正outer <div>的背景，以使它永远不会缩小到inner <div>宽度以下（我仍需要outer div 1}}后台扩展到完整的浏览器宽度，因此也不能设置为width:500px;。

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

Answer 1

将此添加到您的css

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

Answer 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/

Answer 3

body { padding: 20px }

导致您看到的问题。删除它会阻止你所谓的“缩小”。

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

CSS - 使外部<div>背景扩展为内部<div> width </div> </div>

3 个答案: