Question

我想拉伸背景颜色（或图像），因此它看起来像

中的底部示例

相同的代码，但在这里：例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;}

下面的例子是我提出的问题，但问题是浏览器想要滚动到右边的那些2000px。

页面的结构类似于jsfiddle中的代码，你可以看到没有确切知道菜单顶部到底在哪里 - 它上面会有一个可以有高度可变的标题（所以我不能使用一个不错的预生成整页背景图片。）

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

Answer 1

将您的菜单放在包装元素中，给后者一个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;
  }

伸展背景超出父母宽度html css

1 个答案: