0

ブラウザの幅によっては、css クラスのフッターの背景がブラウザの幅全体に収まりません。メイン コンテンツが終了する前にフッターが終了するため、ページが奇妙に見えます。このサイトは avidest.com にアップされているので、私が言及しているものを見ることができます。CSSは次のとおりです。

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}

css はもともと次のとおりでした。

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}

しかし、それもうまくいきませんでした。フッターをブラウザの左側から右側に移動するにはどうすればよいですか?

ありがとうございました。

4

2 に答える 2

2

Chromeインスペクターでウェブページを見ると、このエラーはすべての列とヘッダーのフローティングに関連しているようです。

要素をフロートさせると、その要素はドキュメントフローから「外」になります。これが意味するのは、物をレイアウトするときに、この要素の実際のサイズが考慮されないということです。

私は通常、フロートされた要素でこの動作をしたくないので、これを回避する1つの方法overflow: autoは、親コンテナーに設定することです。

また、ヘッダーのレイアウトが非常に奇妙に見えます。決定的な解決策ができたら、これを更新します。

最初の更新： float要素を持つすべての親に saidoverflow: autoを追加しましたが、今ではうまくいきます。そのルールを次の要素に追加してください。

.Header
.Logo
.body

これらの変更により、ページが乱雑に見えることに注意してください（具体的には、周りに多くのスクロールバーがあります）。

これは、サイズの設定が少し厳しすぎるためです。代わりに、物事がより自然に流れるようにします。例えば：

  • 設定のロゴサイズは必要ありません。
  • ヘッダーの箇条書きの高さが少なすぎます。私もそれを削除します。

私がするもう一つのことは、背景画像を3つ（または少なくとも2つ、ヘッダーとコンテンツ）に分割することです。そうすれば、物事はもう少し切り離され、変更が容易になります。各「論理」ブロック（ヘッダー、フッター、サイドバー、ログインフォーム）を、他のブロック（画像、クラスなど）と共有してはならない独立したモジュールと考えてください。

コメントで説明できないのが残念ですが、遠慮なく質問してください。

于 2013-02-20T04:27:01.793 に答える
1

おそらく0で左右のピクセルを試しましたか？

.Footer { left:0px; right:0px; padding-bottom:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}

それが入っているコンテナかもしれないと思います

于 2013-02-20T03:49:04.667 に答える