本文将講述如何使用CSS讓DIV固定在頁面的左側，而頁面右側內(nèi)容滾動時(shí)，左側位置不随頁面滾動。這種效果在很(hěn)多(duō)地方得(de)到應用。

首先我們來(lái)看一段XHTML代碼。

	
	

		歌(gē)手庫
	

	

		
		

			華語 
			

				
				

					女歌(gē)手
				

				

					男歌(gē)手
				

				

					樂隊組合
				

			

		

		

			歐美
		

		

			日韓
		

		

			其他
		

	




	右側主體(tǐ)內(nèi)容

頁面由左側菜單和(hé)右側主體(tǐ)內(nèi)容構成，右側內(nèi)容可(kě)能會(huì)很(hěn)多(duō)，會(huì)出現翻屏。現在是要無論頁面怎麽翻屏滾動，左側的菜單始終在左側。請(qǐng)看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，并且設置固定寬度，高(gāo)度為(wèi)100%，為(wèi)了區(qū)分右側內(nèi)容，我設置了背景顔色background:#ffc。

接着，我将內(nèi)容部分div#content設置其padding值，注意關鍵是padding-left:190px，隻有(yǒu)大(dà)于左側菜單寬度的padding值，才能使右側主體(tǐ)內(nèi)容部分不會(huì)與左側菜單重疊。請(qǐng)看演示DEMO