CSS - 使外部< div>背景展开到内部< div>宽度 [英] CSS - Make outer <div> background to expand to inner <div> width
问题描述
查看这个简单的页面：
<!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的右侧不再有红色背景：
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:
你知道如何修复 outer< div> width 以外的<$ c> outer< div> （我仍然需要外部div 背景来扩展到完整的浏览器宽度，因此不能设置为 width：500px; 太）。
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：换句话说，我想看到外部div的红色背景颜色填充总宽度为500px的内部div，不缩小到浏览器大小，留下内部div的右侧没有红色背景。为了做到这一点，我不能简单地将外部div设置为500px太，因为当浏览器扩展时，我需要红色背景颜色扩展太。
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
Add this to your css
#outer {background-color:#ff0000; min-width: 500px;}
这篇关于CSS - 使外部< div>背景展开到内部< div>宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
