0

我想拉伸背景颜色（或图像），使其看起来像底部的示例

这个jsfiddle

相同的代码，但在这里：Example1：

<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 将无法滚动。请帮我解决这个问题（如果可能的话）。

4

1 回答 1

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;
  }
于 2012-11-28T09:11:24.120 回答