CSS佈局 - 重疊的div

我有一個非常stuburn佈局，我只是不能解析..CSS佈局 - 重疊的div

- Left column - Fixed,Static (always in view) 
- Right column - Fluid/liquid/scrollable 
--- Header - fixed 
--- left/main fluid/liquid 
--- Right/sidebar - fixed width 
--- footer

（如果上面的不明確 - 頭，左/主，右/側邊欄，頁腳是裏面的右列）

現在，這種佈局這類工作的，

<div id="left-col">left col</div> 

<div id="container"> 

    <div id="header">header</div> 
    <div id="main"> 
     <div id="sidebar">sidebar</div> 
     main 
    </div> 
    <div id="footer">footer</div> 
</div> 

#left-col { 
    width: 50px; 
    position: fixed; 
    background: yellow; 
    left: 0; 
    top: 0; 
} 
#container { 
    margin-left: 50px; 
    background: black; 
} 
#header { 
    background: green; 
} 
#main { 
    background: blue; 
    position: relative; 
} 
#sidebar { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
    background: pink; 
} 
#footer { 
    background: red; 
}

但我仍然有一個惱人的問題 - 時的主要內容是不夠長 - 側邊欄和頁腳是重疊.. 這是因爲側邊欄是：絕對定位 - 但是，然後再次，如果我使它相對，並且頁面正在重新調整大小，側邊欄進入主...（沒有足夠的空間流體.. ）所以，我的問題是這樣的，任何人都有一個想法如何保持側邊欄下的頁腳？（jQuery粘滯技巧不起作用，並且CSS技巧在這裏是相當棘手的..）或任何其他IDE來實現這種佈局？

的jsfiddle：http://jsfiddle.net/VNU6Z/

來源

2011-11-11 krembo99

A [的jsfiddle（HTTP：//的jsfiddle .net）會有很多幫助。 –

感謝凱爾和羅伯特回答 - 但JSFIddle，儘管它似乎是一個不錯的玩具，但不會產生準確的結果。實際上，這裏提出的佈局在JSFiddle上工作 - 但不在瀏覽器本身（在ie6-7-8中檢查）.. – krembo99

您可以使用float：正確的，而不是絕對位置

sample

來源

2011-11-11 14:02:42 Kimtho6

金是正確的。讓div id="sidebar"浮動：權，使div id="main"溢出：隱藏

div id="main"然後將調整到你的浮動元素，就好像它有浮動：左

來源

2011-11-11 14:25:32 Mike

感謝您的回答，我有一些來自css試驗的剩菜導致所有問題..無論如何，我已經在我通常確認的所有瀏覽器中檢查了您的解決方案，並且ie6（通常）並沒有真正得到它......無論如何，您指出我的方向是正確的。我將不得不最終開始下降ie6的支持。嘿，如果微軟不關心我們，我們爲什麼要關心他們，對吧？ – krembo99

好 - 我很抱歉，但我需要更新一些東西。這不是在IE中工作 - 如果給出一定的高度，主框架在左下角。我開始認爲幾乎不可能得到像這樣的跨瀏覽器佈局。 – krembo99

CSS佈局 - 重疊的div

回答

相關問題