ホームページ >ウェブフロントエンド >htmlチュートリアル >div を page_html/css_WEB-ITnose 全体に埋める方法についての質問です。
div を page_html/css_WEB-ITnose 全体に埋める方法についての質問です。
- WBOYオリジナル
- 2016-06-21 08:54:111601ブラウズ
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
="Content-Type" content="text/html; charset=utf-8" />
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388 🎜> html, body, #div1 {
幅: 100%;
高さ: 100%;
パディング: 0px; ;
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
9a072de1946607ca8dfbbc89c6e2ec89
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
div2 の高さが不定であるという 2 つの効果を実現したいのですが、
①div2 の高さが比較的小さい場合、div1 が埋まります。ページ全体
②div2の高さが比較的大きい場合、div1も引き伸ばされます
上記のコードでは効果①のみが実現できますが、効果②は実現できません(高さ=1500pxなど)。 CSSを変更することで①と②の両方を同時に実現できますか？
ディスカッション(解決策)への返信
効果② (フロートをクリアするだけです):ただし、これでは効果 1 は考慮できません。
実際のアプリケーションは、Web ページのテンプレートを作成することです。コンテンツは div2 に配置されます。コンテンツが小さい場合は、div1 がページ全体を埋めることが期待されます。 div1 が引き伸ばされます。ですから、両方の効果を同時に得られることを期待しています。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">html, body, #div1 {width: 100%;margin: 0px;padding: 0px;}</style></head><body><div id="div1" style="background-color:aquamarine;"> <div id="div2" style="width: 95%; height:1500px; margin: 0px auto; background-color: red; overflow:hidden;"> </div></div></body></html> body と html を 100% に設定し、div1 に最小の高さを与えます
3 階の正解、勉強になりました、ありがとうございました!