3

私は filmblurb.org にウェブサイトを持っています。

私のサイトのページコンテナは、スクロールアウトして 100% の CSS レイアウト スタイルを作成すると、ウィンドウの下部まで拡張されますが、何らかの理由で、ボディとタグの高さが 100% の場合でも、これらの 2 つの要素が移動します。ページの約半分で停止し、ビューポートがズームアウトすると停止します。Google Inspect Element でこれらの要素をプロファイリングしているときです。私のページコンテナは現在min-height：100％ですが、何らかの理由でズームアウトすると実際にはビューポートの下部まで伸びます。

より良いアイデアを提供するために、私が見ているもののスクリーンショットも撮りました。ここに [link]i917.photobucket.com/albums/ad16/jtarr523/… (本体用) と

ここに画像の説明を入力

（HTMLの場合）...どちらも下まで伸びていません。

これを修正する方法を知っている人はいますか？

私はそれをお願い申し上げます。

4

2 に答える 2

3

min-height: 100%要素上にhtmlあるということは、その要素が少なくともビューポートと同じ高さになることを意味します。それが常に底まで伸びるという意味ではありません。<html>下にスクロールしても、要素の下部の下にスクロールできる場合があります。

これを防ぐ唯一の方法（JavaScriptの略）は、ページ上のすべての要素（つまり、スクロールバーを引き起こす可能性のあるすべてのもの）がhtml要素内に保持されるようにすることです。これを強制する簡単な方法は、要素を配置overflow: hiddenすることです。html

body {
    overflow: hidden;
}

問題がフロートによって引き起こされている場合、それはそれを解決します。html問題の原因が絶対位置の要素または最後の要素の負の下部マージンである場合、問題はより深刻な問題に置き換えられます。ページは要素の下部で切り取られます。次に、問題のある要素を別の方法で見つける必要があります。

（同じことが要素にも当てはまります。要素を超えて何も拡張できないようにするために、body要素自体が必要になります。）overflow: hidden;

于 2012-05-31T06:03:32.907 に答える
0

ブラウザーのズームで機能するかどうかは正確にはわかりませんが、私の経験では (そしてこの質問によれば)、コンテナー要素を に設定している場合は、htmlタグheightをに設定する必要があります。100%min-height: 100%

html { height: 100%; }
body { min-height: 100%; }

メインコンテナへの参照に置き換えbodyても、引き続き機能するはずです。html私が知る限り、 100%に設定しても悪影響はありません。ページが切り取られたり、他のスタイルが台無しになったりすることはありません。

私が言ったように、これがあなたの問題に関連していると100％確信しているわけではありませんが、おそらく試してみる価値があります.

于 2012-11-02T07:35:51.703 に答える