CSS - Make outer background to expand to inner width

问题

Look at this simple page:

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

When browser page is shrinked below the width of <div id="inner"> (i.e. 500px in this example) and then you scroll browser page to the right, you will see that the right side of the inner div does not have the red background anymore:

Do you know how to fix the background of the outer <div> in order to make it never shrinks below the inner <div> width??? (I still need the outer div background to expand to full browser width so it can not be set to width:500px; too).

EDIT: in other words I would like to see the red background color of the outer div to fill the total 500px width of the inner div and not to shrink to browser size leaving the right side of the inner div with no red background. In order to do this I can not simply set the outer div to be 500px too because when browser is expanded I need the red background color to expand too.

回答1:

Add this to your css

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

回答2:

That's because your inner div is overflowing from the outer div, and not making it expand. Adding overflow: hidden to your outer div, will prevent this from happening by hidding the part of the inner div that overflows.

You can see a demo of that behavior here: http://jsfiddle.net/p6BQg/

More about the CSS overflow property here: http://www.w3schools.com/cssref/pr_pos_overflow.asp

EDIT: To keep the background color on the inner div please see this example: http://jsfiddle.net/p6BQg/1/

回答3:

body { padding: 20px }

is causing the issue you see. removing that will prevent the "shrinking" as you call it.

for example: http://jsfiddle.net/MvJTa/

来源：https://stackoverflow.com/questions/10014766/css-make-outer-div-background-to-expand-to-inner-div-width

标签

css

background

expand

CSS - Make outer <div> background to expand to inner <div> width

问题

回答1:

回答2:

回答3: