簡單的兩列布局，固定側邊欄和流體內容

我見過很多教程創建了一個雙列布局，左邊是固定邊欄，右邊是流體內容。他們也有完整的高度側邊欄，也就是側邊欄下降到主要內容窗口的高度。事情是這樣的網站：簡單的兩列布局，固定側邊欄和流體內容

http://robertgreiner.com/

然而，很多這些似乎被設計爲與IE6的工作。這裏就是這樣一個例子：

http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/

如果我要放棄對IE6的支持，有沒有實現它的自由下鍋的方式。例如，如果我的目標是IE8 +，我可以實現這個更簡單更清潔的方式嗎？

來源

2014-04-15 Jimmy

是的，如果你不需要支持IE6，你可以更簡單的實現它。只需刪除支持IE6的示例中的所有代碼即可。 – caramba

嘿。我在我的網站上使用了Foundation（http://foundation.zurb.com/）框架。您提到的側欄是內置的。如果您需要任何幫助，請給我一封電子郵件。 –

這是我想你想：

HTML

<div id="sidebar"> 
    Some content 
</div> 
<div id="content"> 
    Main content 
</div>

CSS

#sidebar { 
    width:20%; 
    height:500px; 
    border:1px solid #000; 
    position:fixed; 
} 
#content { 
    margin-left:22%; 
    border:1px solid #000; 
    height:1500px; 
}

這裏是一個FIDDLE

來源

2014-04-15 13:20:48

簡單的兩列布局，固定側邊欄和流體內容

回答

相關問題