ホームページ > 記事 > ウェブフロントエンド > CSS は Web ページの下部に固定される div をどのように制御しますか_html/css_WEB-ITnose
CSS は Web ページの下部に固定される div をどのように制御しますか_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:591364ブラウズ
CSS を使用して Web ページの下部に固定される div を制御する方法:
Web デザインでは、このような効果が必要になる場合があります。つまり、Web ページの下部にバナーを配置し、 Web ページがスクロールされたときにバナーを通過できるようになります。
コード例は次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">html, body { padding:0px; margin:0px; height:100%}#main { height:100%; width:100%; overflow:auto;}.neirong { height:1000px; width:20px; background-color:green; margin:0px auto;}#bottombar { position:absolute; width:100%; height:30px; line-height:30px; text-align:center; bottom:0px; background-color:#999; z-index:2;}</style></head><body><div id="main"> <div class="neirong">其实我很长，往下使劲拉吧</div></div><div id="bottombar">蚂蚁部落欢迎您！</div></body></html> 上記のコードは私たちのニーズを満たしています。実装手順を簡単に紹介します:
1. 下部 div とメイン div を絶対に配置し、ドキュメント フローから分離し、2 つの div が互いに重なるようにします。
2.bottom 属性を使用して Web ページのレベルに下部 div を配置し、その z-index 属性値を 2 に設定し、メイン div の z-index 属性値を 1 に設定して、下部が確実に下になるようにします。 div はメイン div の上に配置できます。
3. メイン div の高さが表示領域を超える場合に、ドロップダウン バーを使用して非表示のコンテンツを表示できるように、メイン div のオーバーフロー属性値を auto に設定します。
注: overflow:visible はドロップダウン バーを使用して余分なコンテンツを表示することもできますが、効果は異なります。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/942.html
最もオリジナルのアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod= viewthread&tid= 4688