CSS は Web ページの下部に固定される div をどのように制御しますか_html/css

CSS は Web ページの下部に固定される div をどのように制御しますか_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:59

オリジナル

1376 人が閲覧しました

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