div レイアウト_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div レイアウト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:35:53

オリジナル

1034 人が閲覧しました

<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;
}

5階の返信からの引用:

3階のメソッドは使用されていません。まだjsのみを使用できます。
利用可能なすべての方法をブロックしました。

+++

私もこれをやりたいのですが、左側のツリーがスペースを占めています

同じ高さの 2 つの列を実現する 4 つの方法を選択してください。自分で http://www .cnblogs.com/pooh0x0/archive/2012/03/23/2413265.html

さて、上の人は多くのことを学びました。