0

このブログ投稿 (コメントを参照 - SO を初めて使用するため、リンクを 2 つ以上投稿することはできません) を使用して、自分の Web サイトに固定されていない (固定されていない) フッターを配置しました。

このブログ投稿 (コメントを参照) を使用してホバー時に画像を表示するまで、Web サイトのどこでも機能していました。現在、フッターはページの下部よりかなり上に浮いていますが、画像ホバー スタイルのページのみです。これは壊れたページで、これが機能しているページです。

Chrome 開発ツールでそれらを削除するul.enlarge spanと、フッターが元の位置に戻りますが、拡大されたホバー画像がすべてページに表示されます (明らかに、私が望むものではありません)。 .

フッターをページの下部にとどめ (コンテンツが一番下まで届かない場合でも)、ホバーしたときに画像を拡大する方法はありますか???? ページの下部にある巨大な空白のギャップの原因は何ですか??

4

1 に答える 1

0

これは、壊れたページ (ビュー ウィンドウの左端に隠れている) のフルサイズのギャラリー画像がスペースを取っているためです。positionこれらの画像を含む要素を変更することでフッターを修正できます

ul.enlarge span {
    left: -9999px;
    position: absolute;
}

に

ul.enlarge span {
    left: -9999px;
    position: fixed;
}

position: fixed;したがって、これらの画像は、ブラウザー ウィンドウに対して要素を配置するように「非表示」になっている間、ページの残りの部分に干渉しません。

left値を に変更することで、どのように、なぜ壊れたのかを確認することもできる0ので、バックグラウンドで何が起こっているかがわかります

編集:コメントで提案されているように、そのようなギャラリーのスタイルを修正することでページを修正することもできます

ul.enlarge span {
    display: none;
}
ul.enlarge li:hover span {
    display: block;
    position: absolute;
    left: -20px;
    top: -300px;
}

将来的にフッターを壊すことはありません

于 2015-01-05T23:01:55.193 に答える