ホームページ > 記事 > ウェブフロントエンド > div レイアウト_html/css_WEB-ITnose
div レイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:35:531032ブラウズ
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title><style type="text/css">*{padding:0;margin:0;}#header{background-color:#999999;height:60px;min-width:1024px;}#left{width:200px;background-color:#00FF00;float:left;}#content{height:400px;background-color:#0000FF;min-width:1px;}#footer{height:50px;background-color:#CCCCCC;}</style></head><body><div id="header"></div><div id="left"></div><div id="content"></div><div id="footer"></div></body></html> 効果は次のとおりです:
メニューの下に空白領域があることがわかります。この空白領域を埋めるために div を使用します。可変、 # コンテンツは非常に可変です。この div はサイズをインテリジェントに拡張します。もっと良い方法はありますか？
または、問題を単純に 2 つの並列 div にさらに抽象化し、そのうちの 1 つは可変の高さを持ち、それに応じてもう一方の並列 div を変更する必要がある場合もあります。
ディスカッションに返信(解決策)
JSを使用してクリックイベントを記述すると、divの範囲内にドロップダウンボックスが表示されます
必要な場合以外はjsを使用しないようにしてください。
この変更の特別な意味は何ですか? #left と #content の背景を揃えることができないことを除けば、効果は同じではないでしょうか。背景を揃える必要がある場合は、大きな DIV を使用して #left #content をレポートし、DIV 背景画像を設定することをお勧めします。以前は、163、sohu、およびその他のコンテンツ ページでこの効果がありました。はすべてこの方法が使われていました。
上の階では、#left と #content をラップして背景画像を追加すると、背景画像は #content に影響を与えません。
3階のメソッドは使用されていません。まだjsのみを使用できます。
利用可能なすべての方法をブロックしました。
どのような効果が欲しいかを詳しく質問してください。左右のブロックの高さが異なります。ただし、背景は一番上のブロックで下に伸ばす必要があります。これは意味しますか？
ほぼ、実際には 3 つの div に相当します
上の図では #menu と #content で、左側の #menu の下には空白の領域があります。とりあえず #white として定義しましょう
その結果、#white は、#menu+#white の高さを #content と一致させながら、コンテンツ、メニューの高さ、さらには長さも自動的に変更されます。
3階のメソッドは使用されていません。まだjsのみを使用できます。
利用可能なすべての方法をブロックしました。
++
検査するために来ました
2 つ並べて、
#left,#content{
margin-buttom:-99999px;
overflow-y:hidden;
}
3階のメソッドは使用されていません。まだjsのみを使用できます。
利用可能なすべての方法をブロックしました。
+++
同じ高さの 2 つの列を実現する 4 つの方法を選択してください。自分で http://www .cnblogs.com/pooh0x0/archive/2012/03/23/2413265.html
さて、上の人は多くのことを学びました。