我應該如何正確使用位置和其他屬性來定位我的網頁？

Question

我有一個功能齊全的網頁，包含三個部分。橫幅容器，菜單容器和內容容器

這是佈局：

The layout of my webpage http://oi60.tinypic.com/2qjhc40.jpg

的問題是，這些使用position: fixed;定位在一起以margin，left，和top性質。這意味着當Web瀏覽器小於網頁的大小時，我無法滾動它。是的。我知道解決方案是刪除「位置：固定」（已在其他線程關於此主題在這裏在stackoverflow指出）。但問題是，我沒有能夠扣留佈局，同時消除固定的位置，甚至沒有關閉。

與此我最接近的是，只是將內容容器的位置屬性更改爲relative。這不會影響佈局，而Web瀏覽器窗口的大小大於整個頁面的寬度，並且當它是Web瀏覽器窗口小於內容容器時，我確實可以在其上滾動。但是，當然，當我縮小瀏覽器窗口的大小時，我的內容容器會跟着它，並遮住我的菜單容器（因爲它仍然具有固定的位置）。不管怎樣，我的菜單按鈕（即鏈接放置在列表中）即使沒有被內容容器遮蓋，也不會在點擊它們並懸停在它們上面時發生反應。

所以，對於如何使用定位和其他屬性來定位您的網頁，有一個很好的經驗法則，因爲很明顯，我已經以某種方式得到了所有錯誤。

這是我的三個集裝箱的相關CSS屬性：提前

div#banner_container{ 
    position: fixed; 
    width: 650px; 
    height: 75px; 
    margin-left: 50px; 
    margin-top: 8px; 
} 

div#menu_container { 
    top: 95px; 
    position: fixed; 
    width: 150px; 
    height: 150px; 
    margin-left: 50px; 
    margin-top: 10px; 
} 

ul#menu { 
    position: fixed; 
    left: 18px; 
    top: 89px; 
} 

div#content_container { 
    position: fixed; 
    top: 95px; 
    width: 100%; 
    max-width: 492px; 
    height: 500px; 
    margin-left: 210px; 
    margin-top: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

謝謝！

Answer 1

這對你有好處嗎？

http://jsfiddle.net/0cmwhafq/2/

我只設置了所有位置相對的，使用浮動：左，爲你的菜單和內容容器

div#banner_container{ 
    position: relative; 
    width: 99%; 
    height: 75px; 
    margin:1%; 
    background-color:red; 
} 

div#menu_container { 
    position: relative; 
    width: 18%; 
    margin:1%; 
    height: 350px; 
    background-color:green; 
    float:left; 


} 


div#content_container { 
    position: relative; 
    width: 79%; 
    height: 500px; 
    margin-left:1%; 
    margin-top:1%; 
    float:left; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background-color:blue; 

} 

如果你希望你的佈局爲中心，只需添加含包裝他們全部

Answer 2

這裏的根本問題是您使用position: fixed來設置整個佈局的樣式。這是非常糟糕的做法，可以完全避免。

如果你真的不想取消固定定位，則可以改爲給你內容容器的overflow屬性設置爲scroll：

div#content_container { 
    ... 
    overflow: scroll; 
} 

注意，overflow酒店還支持overflow-x和overflow-y這讓你分別迎合水平或垂直滾動​​條 - 在你的情況下這可能會更好。