[HTML&CSS] 鎖定左側功能選單，不隨頁面捲動

為了把簡睿常用的工具網頁變更成更好閱讀的的樣式：用左右兩欄式，左側置放功能選單，右側則為主要內容。為了方便套用，特別先製作一個簡單的樣板，在此留下記錄也提供給有相同需求的讀者參考。(按圖開新窗放大)

左側與右側各置放一個<div>，其ID分別為left與right，在left上在疊放另一個<div id="menu">，主要的控制就是把left的<span style="font-weight: bold;">position</span>設定固定(<span style="font-weight: bold;">fixed</span>)，這樣就能把此區域鎖定在網頁上，不隨著右側內容的捲動而移動。IE則必須針對overflow做控制才能正確顯示。

測試網頁的執行請瀏覽這裡。

(樣板結構參考：http://www.pixelbeat.org/cmdline.html)

測試網頁源碼如下：

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">












鎖定左側功能選單，不隨頁面捲動





    
  

##

您可能也會有興趣的類似文章

• 網頁顯示程式碼的美容師：CodePress (0則留言, 2007/03/27)
• 如何將Markdown文件轉換成HTML？ (1則留言, 2011/03/06)
• [Reference] 插入圖形檔案時使用的樣式 (0則留言, 2005/02/22)
• 把文章的分類當做HEMiDEMi的標籤：Xuite自動書籤按鈕 V1.3 (2則留言, 2007/02/27)
• [Blog] 加入Furl與del.icio.us的連結 (0則留言, 2005/03/04)
• 修改自動產生分享書籤的按鈕 (4則留言, 2007/02/11)
• 用樣式控制Google AdSense廣告顯示的位置 (13則留言, 2007/05/03)
• 顯示氣象局的紅外線雲圖 (2則留言, 2005/09/22)
• 初試AJAX：中文的傳遞與接收 (0則留言, 2007/03/16)
• 「網頁載入中，請稍候．．．」的簡單作法 (17則留言, 2007/05/02)
• IE和FireFox存取同名物件有不同的作法 (0則留言, 2007/04/08)
• 變更MyBlogLog的onclick事件處理程式 (V1.3修改) (8則留言, 2007/04/08)
• 將IE網頁轉換成FireFox也能執行 (0則留言, 2007/02/28)
• Plurk CSS樣式自訂修改全攻略 (77則留言, 2009/07/04)
• JavaScript Collector: 包羅萬象的JavaScript檔案庫 (0則留言, 2007/03/20)