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;}

下の例は私が思いついたものですが、問題はブラウザが右側の 2000px までスクロールしたいということです。

ページの構造は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 に答える