CSS - Make outer <div> background to expand to inn

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:

enter image description here

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.

标签： css background expand

3条回答

Luminary・发光体

2楼-- · 2019-08-21 18:06

Add this to your css

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

0人赞添加讨论(0) 举报

来，给爷笑一个

3楼-- · 2019-08-21 18:17

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/

0人赞添加讨论(0) 举报

神经病院院长

4楼-- · 2019-08-21 18:19

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/

0人赞添加讨论(0) 举报

CSS - Make outer background to expand to inn

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

CSS - Make outer
background to expand to inn