0

次のコードを想像してください。

<body id="first_bg_layer">
  <div id="second_bg_layer">
    <div id="third_bg_layer">
    </div>
  </div>
</div>

各レイヤーには、目的の効果を得るために静的/反復される異なる背景があります。画面を埋めるにはすべてのレイヤーが必要です。そうしないと、背景が壊れてしまいます。画像サイズを最小化するために、背景はレイヤーに分割されます。

min-height を 100% に設定しても、さまざまな理由で機能しません。これを行う方法はありますか？

編集: #second_bg_layer を height:100% に設定し、#third_bg_layer を min-height:100% に設定すると、うまくいきます。ただし、#second_bg_layer は 100% にロックされ、それ以上展開されません。

私がやりたいことは、両方の div またはその他のソリューションに最小高さを設定することです。

4

3 に答える 3

1

私が以前に読んだトリックであり、よく思い出せば、次のように適用されます...最初の部分で他の人がちょうど上で言ったように、私は設定します：

html,html 本文 {高さ:100%;}

次に、すべてのコンテンツを含む div。あなたがそう呼びたいなら、一種のラッパー。

... {height:100%;min-height: 100%;} をクラスまたは ID に設定するラッパー div。

しかし悲しいことに、IE は min-height も height:auto もサポートしていないので...

最初に IE ケース行を設定するだけです: {height: 100%;}

そして、他のブラウザに適用される css:

html>bodywhatever_the_div_class {height: auto;min-height: 100%;}

最後に、フッター div を実行して、このラッパー div の外に配置します。その直後に、css プロパティを追加します。

高さ 1%; clear:both (1% はよくあることですが、IE には「スペース」が必要であるか、奇妙なことをします)

まあ、それが役立つことを願っています:)

于 2010-04-14T12:30:55.650 に答える
0

HTML と BODY の高さをマージン 0 で 100% に設定しましたか? そうでない場合は、それを行います。そうであれば、div 要素が正しく配置されていることを確認してください。

于 2010-04-14T07:42:08.377 に答える
0

ボディ領域から幅と高さを完全に取得していない場合は、次のように求めている可能性があります。

html, body {
    height: 100%; width: 100%;
}

/* And perhaps adding this if you're not using any reset CSS */
html, body {
    margin: 0; padding: 0;
}

そうでない場合、何に問題があるのか​​わかりませんが、選択した要素の外に背景画像を表示することはできません。背景レイヤーをレイヤー自体とは異なるものにしたい場合は、幅/高さを持つ追加の div を使用することをお勧めします: 100%; 位置: 絶対; 上/左: 0; 背景: url(...); 背景画像を保持します。

于 2010-04-14T07:42:09.153 に答える