2

WordpressをCMSとして使用してWebサイトでいくつかのテストを行っています。以下の例では、ページの左上にメインコンテンツ領域の外側に「S」グラフィックがあり、ブラウザの幅に応じてそれに応じてクリップされています。フッターの右側にある「L」のグラフィックで同様のことをしたいと思います。

ページ幅は960pxに設定されており、「L」がコンテンツ領域の外側に表示されるように、フッターコンテナをDIV1088pxにしました。問題は、ブラウザの現在の幅を超えるとスクロールバーが表示されることです。

フッターコンテナDIVにoverflow：hiddenを試しましたが、機能しないようです。BODY要素でoverflow：hiddenも試しましたが、これはIEでは問題なく機能しますが、他のブラウザーでは機能しません。

例： http： //unclemort.com/wp/

私は本当にこれをするために離れていることを願っています、どんな助けもありがたく受けました。

4

2 に答える 2

5

私は今日これを自分で理解しようとしていて、答えに出くわしました。必要なのは、これを持つすべてのものを囲む要素です。

#wrapper {
  min-width: 600px; //whatever width you want
  overflow-x: hidden;
}

メイン コンテンツは同じ幅にする必要があり、突き出す必要があるものには負のマージンを設定する必要があります。

完全な例を次に示します。

HTML:

<div id="outer">
   <div id="container">
       <div class="row">
           <div class="inner">Hello World</div>
       </div>
    </div>
</div>

CSS:

  #outer {
      min-width: 300px;
      overflow-x: hidden;
  }

  #container {
      width: 300px;
      margin: 0px auto;
      background: gray;
      height: 500px;    
  }

  .row {
      width: 350px;
      background: blue;
      margin-left: -25px;
  }

  .inner {
      background: yellow;
      margin-left: 25px;
      width: 300px;
      height: 100px;
  }

  @media screen and (min-width: 301px) {
      body {
          //overflow-x: hidden;
      }
  }

jsfiddle:

http://jsfiddle.net/aaronjensen/9szhN/

于 2012-04-27T07:59:32.747 に答える
-1

style.css の 65 行目に以下を追加してみてください。

#footer-container {
    border: none;
    overflow: hidden;
}

説明：

#footer-container #footer {
    background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left;
    width: 1088px;      
    height: 217px;  
    overflow: hidden;   
    }

非表示にしているスクロールバーは事実上存在しません。あなたが見ているスクロールバーは別のものです。問題は、フッターの幅が 1088px であり、スクロールバーが表示されることです。

フッターの幅が固定されていて、その親に overflow: hidden がない限り、フッターが収まる十分な幅がない場合、スクロールが発生します。他のコンテナも同様です。

于 2010-03-01T10:52:14.527 に答える