0

したがって、これまでのところ、このサイトのほとんどは自動センタリング (コンテナとナビゲーションには margin-left/right:auto があります) を使用しており、フッターを除いてすべてうまくいっているようです。

ウィンドウのサイズを変更すると、水平方向にスクロールするとフッターが右側で切り取られているように見える以外はすべてうまく表示されます。これはブラウザーのバグである可能性があることを読みました。これは IE と chrome と firefox で発生しますが、単にずさんなコーディングである可能性があります (私は初心者です)。

CSSは次のとおりです。

 #footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
 }


 /*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
   min-width:1000px;    
   }

/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
    #footerContent ul{
        width:1000px;
    margin-left:auto;
    margin-right:auto;
    }

#footerContent li {float:left; width:250px;  }

繰り返しますが、ブラウザが全画面表示またはサイズ変更されている場合は正常に機能します。ただし、サイズを変更し、水平スクロールバーを使用して右端までスクロールすると、背景画像が切り取られます。

width:100%, min-width, width:1000px; を試しました。しかし、どれもうまくいかないようでした。

http://postimage.org/image/3so264fnb/

4

1 に答える 1

1

Stackoverflowが似ているというあなたのコメントについて

(少なくとも 2012 年 4 月 29 日現在)

stackoverflow の問題は、footerに別のdiv要素が含まれているようですfooterwrapが、それにはwidth: 960px設定があり、それfooter自体には幅の設定がありません。Adivは基本的に、ブロック レベルのコンテンツを単に「グループ化」するように設計されています。divがその内容とともに拡張されるというのはよくある誤解です。実際には、明示的なが親に設定されているdiv場合、 aはその親に展開されます。何もない場合は、ブラウザ ウィンドウに適合します。これがあなた（およびスタックオーバーフロー）が経験していることです。width

をdivコンテンツに関連付けるには、次のwidthいずれかを行う必要があります。

  1. コンテナーのwidthorを明示的に設定します。min-widthしたがって、stackoverflow がmin-width: 990px(footerwrap の 960px + 両側に 15px のパディング) をfooterその wrapsに設定するfooterwrapと、その問題は解決されます。
  2. フローティング要素がそのコンテンツをラップするため、コンテナーdivをに設定します。float

この例 fiddleを見てください。最初の 2 つの div の経験で、あなたが見ているのと同じ問題に注意してください。フィドルで iframe ウィンドウのサイズを縮小または拡大すると、最初の 2 つの div が縮小または拡大されますが、水平スクロールには空白のスペースが残ります。3 番目と 4 番目の div には、上記の修正が適用されています。5 番目の div は、幅が定義されていない場合、内側の div が明示的なセットを持つコンテナーの幅に拡張されるという事実を示していwidthます。

補足として、に幅が設定されていない場合はfloat: left、要素にa を実際に追加するだけで機能する場合があります (多くのブラウザーではテストしていませんが、FF 11 は機能しました) 。この例が示すように、最初の 2 つの div を 3 番目と 4 番目の div のように動作させるのに効果があるようです。bodybody

これが役立つことを願っています。

元の回答

情報が不足しているため、何ができるかは少し不明です。探すべきいくつかのことを次に示します。

  1. あなたのbackground-image幅は十分background-repeat: repeat-xですか？
  2. フッターの幅 ( 1000px) は上部のコンテンツの幅と一致していますか? フッターが上部のコンテンツ領域 (またはヘッダーなど) よりも狭く制限されている場合、その背景は整列しません。

ページの html と css を詳しく見ることなく、画像のサイズと機能に対する意図を知らずにできる最善の方法です。

于 2012-04-28T13:39:11.847 に答える