div_html/css_WEB-ITnose の絶対配置によって引き起こされる下位 div 位置の問題-htmlチュートリアル-php.cn

div_html/css_WEB-ITnose の絶対配置によって引き起こされる下位 div 位置の問題

WBOY

リリース： 2016-06-21 09:37:59

オリジナル

1652 人が閲覧しました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><div style="margin-left:auto; margin-right:auto; width:300px; background-color:#003399;"><div style="width:4000px;"><div style="float:left; width:260px; background:#CC0000; height:4000px; position:absolute;"></div></div><div style="clear:both;"> </div></div><div style="clear:both;margin-left:auto; margin-right:auto; width:800px; height:80px; background-color:#009900;">底部竟然不在底部，而是在中间位置</div></body></html>

ログイン後にコピー

一番下の div は一番下ではなく真ん中に表示されます。解決する方法はありますか。レイヤーの 1 つは絶対配置を必要とするため、絶対配置を削除すると、そのレイヤーが一番下に表示されます

ディスカッションへの返信 (解決策)

下は下ではなく真ん中です

IE6以外全ブラウザ対応
ie6はjs処理を使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><div style="margin-left:auto; margin-right:auto; width:300px; background-color:#003399;"><div style="width:4000px;"><div style="float:left; width:260px; background:#CC0000; height:4000px; position:absolute;"></div><!--这个有什么意义么，把这个去掉就好--></div><div style="clear:both;"> </div></div><div style="clear:both;margin-left:auto; margin-right:auto; width:800px; height:80px; background-color:#009900;">底部竟然不在底部，而是在中间位置</div></body></html>

ログイン後にコピー

HTMLコード

Position:absolute

を削除するだけです

この問題は、絶対配置を使用するときに発生します。js は、それを処理するために js を使用して、底部より上の div の高さを取得し、次に margin-top を設定します。一番下のブロック

まあ~~絶対に配置された要素はページの位置を占めません。
現在のコードだけから判断すると、なぜ絶対位置決めを使用する必要があるのかわかりません。
そして、絶対位置決めが使用されているのに、なぜ float と Clear float を使用する必要があるのでしょうか? これは、絶対位置決めと同時に使用しても効果がありません。
移動して位置を占有したい場合は、相対位置決めの使用を検討できます。