拉伸backgrond超越父母宽HTML CSS

我想舒展的背景颜色（或图像），所以它看起来像底部的例子拉伸backgrond超越父母宽HTML CSS

相同的代码，但在这里：例1：

<div class="fixed_width"> 
    <div class="header">Header</div> 
    <div class="menu"> 
     Here be some menu 
    </div> 
    <div class="content"> 
     Here be some content<br/> 
     ANd even more 
    </div> 
</div>

实施例2

<div class="fixed_width"> 
    <div class="header">Another<br/>Header</div> 
    <div class="menu2"> 
     Here be some menu 
    </div> 
    <div class="content"> 
     Here be some content<br/> 
     ANd even more 
    </div>

CSS：

body {background: lightgray} 
.fixed_width {width: 500px; border: solid thin black; 
    margin: 20px auto; background: white;} 
.menu {background: blue; color: white; padding: 20px; 
    margin-bottom: 10px;} 
.content {background: white; border: solid thin gray; 
    margin: 5px;} 

.menu2 {width: 500px; background: blue; color: white; 
    margin-bottom: 10px;padding: 20px 2000px 20px 2000px; 
    margin-left: -2000px;}

底部例子是我想出了，但问题是浏览器要滚动到右边的2000像素。

页面的结构与jsfiddle中的代码类似，正如你所看到的那样，不知道菜单顶部的确切位置 - 在它上面会有一个头部可以有不同的高度（所以我可以不使用一个不错的预生成整页背景图片）。

我无法禁用滚动，因为在较小的屏幕上，ppl将无法滚动。请帮我解决这个问题（如果可能的话）。

来源

2012-11-28 RandomWhiteTrash

把你的菜单中的一个包装元素，给的100％，后者的宽度（假设它是最上面的元素），并居中菜单：

HTML：

<body> 
    <div id="menu_wrapper"> 
     <ul id="menu"> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     </ul> 
     </div> 
    </body>

CSS：

#menu_wrapper { 
    width:100%; 
    background:blue; 
    } 
    #menu 
    width:1000px; 
    margin:0 auto; 
    }

来源

2012-11-28 09:11:24 Matanya

不幸的是，如图所示，Menu不是顶层元素，它已经在'fixed_width'元素中。 – RandomWhiteTrash

你不能包裹#fixed_width div本身吗？即为每个背景创建不同的包装：头包装器，内容包装等。 – Matanya

如果没有其他方法可以做到这一点，那么我想我将不得不这样做，但我想尽量避免这种情况 – RandomWhiteTrash

拉伸backgrond超越父母宽HTML CSS

回答

相关问题