CSS讓DIV固定位置 不隨捲軸而滾動

來源:互聯網
上載者:User

fixed元素的絕對位置是相對於HTML元素來說,捲軸是body元素的。

只有記住了這句話,才知為什麼position:absolute;很多地方都給出了結果,但當時並未能解決。因為html被我設定position:relative。是上面這一句啟發了我,最終才能夠解決這個問題。我們拉動捲軸的時候,內容都會隨著視窗滾動;這時滾動的是body。如果讓絕對位置的父級元素定為body,剛我們需要固定的某個模組將會固定在網頁的某個位置,而不是固定在視窗的某個位置(貌似在firefox中,html與body之間的介限並不明確?)。
我們需要做的是,讓body保持其原有高度,讓html只有一個視窗那麼高。代碼我們可以這樣寫:

 代碼如下 複製代碼
html{overflow:hidden;} // 重要!
body{height:100%;overflow:auto;}

這時,html將只有一個視窗那麼高,超過的,直接hide。而body會隨高度自動變化。這時,我們可以利用絕對位置來定位我們想要固定在視窗某個位置的模組。假設我們要固定的內容在右上方,代碼可以這樣寫:

 代碼如下 複製代碼
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;}

這樣,視窗就固定在右上方了。而其他瀏覽器,我們可以用position:fixed;來解決固定的問題。其他瀏覽器完整的代碼如下

 代碼如下 複製代碼

#rightform {text-align:center;padding:50px;font:14px/22px Georgia, “Times New Roman”, Times, serif;height:1200px;background:#ffc;}
#rightform h1 {font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;}
#rightform p {line-height:1.5em;background:#ffdfff;padding:90px 0;}
#rightform form {background-color:#ddd;padding:10px 20px;border:1px solid #aaa;position:fixed;right:30px;top:120px;}


首先我們來看一段XHTML代碼。

 代碼如下 複製代碼

<div id="site_nav">
    <h3>歌手庫</h3>
    <ul>
      <li><a href="#">華語</a>
          <ul>
             <li><a href="#">女歌手</a></li>
             <li><a href="#">男歌手</a></li>
             <li><a href="#">樂隊組合</a></li>
          </ul>
      </li>
      <li><a href="#">歐美</a></li>
      <li><a href="#">日韓</a></li>
      <li><a href="#">其他</a></li>
    </ul>
</div>
<div id="content">
右側主體內容
</div>

頁面由左側菜單和右側主體內容構成,右側內容可能會很多,會出現翻屏。現在是要無論頁面怎麼翻屏滾動,左側的菜單始終在左側。請看CSS解決方案。

 代碼如下 複製代碼

#site_nav{position:fixed; width:160px; padding:6px 10px; height:100%; 
background:#ffc; overflow-y:auto;}
#content{padding:10px 10px 10px 190px;}

我設定左側div#site_nav的樣式,將其位置固定,即position:fixed,並且設定固定寬度,高度為100%,為了區分右側內容,我設定了背景顏色background:#ffc。

接著,我將內容部分div#content設定其padding值,注意關鍵是padding-left:190px,只有大於左側菜單寬度的padding值,才能使右側主體內容部分不會與左側菜單重疊

完整執行個體

 代碼如下 複製代碼

<!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=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#747d67; background:#fff}
a{color:#528036; text-decoration:none}
a:hover{color:#000; text-decoration:none}
ul{list-style:none}
h1{font-size:16px}
.clear{clear:both}

#site_nav{position:fixed; width:160px; padding:6px 10px; height:100%; background:#ffc; overflow-y:auto;}
#site_nav ul{margin:2px}
#site_nav ul li{line-height:22px}
#site_nav ul li ul{padding-left:12px}
#content{padding: 10px 10px 10px 190px;}
#content ul{margin:10px auto}

</style>
</head>

<body>
<div id="site_nav">
    <h1>歌手庫</h1>
    <ul>
      <li><a href="#">華語</a>
          <ul>
             <li><a href="#">女歌手</a></li>
             <li><a href="#">男歌手</a></li>
             <li><a href="#">樂隊組合</a></li>
          </ul>
      </li>
      <li><a href="#">歐美</a></li>
      <li><a href="#">日韓</a></li>
      <li><a href="#">其他</a></li>
    </ul>
</div>

<div id="content">
    <ul>
       <li><a href="#">A ONE</a></li>
       <li><a href="#">A-Z樂隊</a></li>
       <li><a href="#">A.J.Alex</a></li>
       <li><a href="#">ADO</a></li>
       <li><a href="#">Airbag</a></li>
       <li><a href="#">Ak-47</a></li>
       <li><a href="#">阿佳組合</a></li>
       <li><a href="#">阿萊樂隊</a></li>
       <li><a href="#">阿里郎</a></li>
       <li><a href="#">阿里山桃花</a></li>
       <li><a href="#">阿吟琴</a></li>
       <li><a href="#">阿貓阿狗</a></li>
       <li><a href="#">阿妹妹</a></li>
       <li><a href="#">愛庫樂團</a></li>
       <li><a href="#">愛朵女孩</a></li>
       <li><a href="#">安琪兒</a></li>
       <li><a href="#">愛樂團</a></li>
       <li><a href="#">哎吆樂隊</a></li>
       <li><a href="#">城市少女</a></li>
    </ul>
    <ul>
       <li><a href="#">B.A.D</a></li>
       <li><a href="#">Beyond</a></li>
       <li><a href="#">BOBO組合</a></li>
       <li><a href="#">八十八顆芭樂籽</a></li>
       <li><a href="#">八隻眼組合</a></li>
       <li><a href="#">辦桌二人組</a></li>
       <li><a href="#">棒棒堂</a></li>
       <li><a href="#">北京天使合唱團</a></li>
       <li><a href="#">不複之血樂隊</a></li>
       <li><a href="#">薄荷可樂三人組</a></li>
       <li><a href="#">病蛹樂隊</a></li>
       <li><a href="#">冰火組合</a></li>
       <li><a href="#">病醫生樂隊</a></li>
       <li><a href="#">北京中央人</a></li>
       <li><a href="#">布衣樂隊</a></li>
    </ul>
    <ul>
       <li><a href="#">A ONE</a></li>
       <li><a href="#">A-Z樂隊</a></li>
       <li><a href="#">A.J.Alex</a></li>
       <li><a href="#">ADO</a></li>
       <li><a href="#">Airbag</a></li>
       <li><a href="#">Ak-47</a></li>
       <li><a href="#">阿佳組合</a></li>
       <li><a href="#">阿萊樂隊</a></li>
       <li><a href="#">阿里郎</a></li>
       <li><a href="#">阿里山桃花</a></li>
       <li><a href="#">阿吟琴</a></li>
       <li><a href="#">阿貓阿狗</a></li>
       <li><a href="#">阿妹妹</a></li>
       <li><a href="#">愛庫樂團</a></li>
       <li><a href="#">愛朵女孩</a></li>
       <li><a href="#">安琪兒</a></li>
       <li><a href="#">愛樂團</a></li>
       <li><a href="#">哎吆樂隊</a></li>
       <li><a href="#">城市少女</a></li>
    </ul>
    <ul>
       <li><a href="#">A ONE</a></li>
       <li><a href="#">A-Z樂隊</a></li>
       <li><a href="#">A.J.Alex</a></li>
       <li><a href="#">ADO</a></li>
       <li><a href="#">Airbag</a></li>
       <li><a href="#">Ak-47</a></li>
       <li><a href="#">阿佳組合</a></li>
       <li><a href="#">阿萊樂隊</a></li>
       <li><a href="#">阿里郎</a></li>
       <li><a href="#">阿里山桃花</a></li>
       <li><a href="#">阿吟琴</a></li>
       <li><a href="#">阿貓阿狗</a></li>
       <li><a href="#">阿妹妹</a></li>
       <li><a href="#">愛庫樂團</a></li>
       <li><a href="#">愛朵女孩</a></li>
       <li><a href="#">安琪兒</a></li>
       <li><a href="#">愛樂團</a></li>
       <li><a href="#">哎吆樂隊</a></li>
       <li><a href="#">城市少女</a></li>
    </ul>
    <ul>
       <li><a href="#">A ONE</a></li>
       <li><a href="#">A-Z樂隊</a></li>
       <li><a href="#">A.J.Alex</a></li>
       <li><a href="#">ADO</a></li>
       <li><a href="#">Airbag</a></li>
       <li><a href="#">Ak-47</a></li>
       <li><a href="#">阿佳組合</a></li>
       <li><a href="#">阿萊樂隊</a></li>
       <li><a href="#">阿里郎</a></li>
       <li><a href="#">阿里山桃花</a></li>
       <li><a href="#">阿吟琴</a></li>
       <li><a href="#">阿貓阿狗</a></li>
       <li><a href="#">阿妹妹</a></li>
       <li><a href="#">愛庫樂團</a></li>
       <li><a href="#">愛朵女孩</a></li>
       <li><a href="#">安琪兒</a></li>
       <li><a href="#">愛樂團</a></li>
       <li><a href="#">哎吆樂隊</a></li>
       <li><a href="#">城市少女</a></li>
    </ul>
    <ul>
       <li><a href="#">A ONE</a></li>
       <li><a href="#">A-Z樂隊</a></li>
       <li><a href="#">A.J.Alex</a></li>
       <li><a href="#">ADO</a></li>
       <li><a href="#">Airbag</a></li>
       <li><a href="#">Ak-47</a></li>
       <li><a href="#">阿佳組合</a></li>
       <li><a href="#">阿萊樂隊</a></li>
       <li><a href="#">阿里郎</a></li>
       <li><a href="#">阿里山桃花</a></li>
       <li><a href="#">阿吟琴</a></li>
       <li><a href="#">阿貓阿狗</a></li>
       <li><a href="#">阿妹妹</a></li>
       <li><a href="#">愛庫樂團</a></li>
       <li><a href="#">愛朵女孩</a></li>
       <li><a href="#">安琪兒</a></li>
       <li><a href="#">愛樂團</a></li>
       <li><a href="#">哎吆樂隊</a></li>
       <li><a href="#">城市少女</a></li>
    </ul>
 
</div>

</body>
</html>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.