特殊的2與CSS的列布局

我一直在想出一個特殊的2列布局。特殊的2與CSS的列布局

基本上這些是要求

固定的寬度和中心
身高100％
頁眉和頁腳總是可見
2列的內容（主 - 右）
主柱滾動溢出
固定右列

這是我迄今的代碼。我只是無法集中整個佈局。
住在www.onlinesportcenter.com

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>SPECIAL 2 COLUMN LAYOUT</title> 

<style type="text/css"> 

body { 

    margin:0; 
    border:0; 
    padding:0; 
    height:100%; 
    max-height:100%; 
    background:#fff; 
    font-family:arial, verdana, sans-serif; 
    font-size:76%; 
    overflow: hidden; 

} 


* html body { 

    padding:120px 0 20px 0; 

} 

#header { 

    position:absolute; 
    top:0; 
    left:0; 
    width:1004px; 
    height:119px; 
    overflow:auto; 
    background:#73a2bd; 
    border-bottom:1px solid #35759a; 
    text-align:center; 

} 

* html #header {height:120px;} 


#header p { 

    color:#fff; 

    margin:2px 0 0 0; 

} 

#header ul { 

    clear:both; 
    text-align:center; 
    border-top:1px solid #73a2bd; 

    } 



#header ul { 

    margin:0; 
    padding:0; 
    list-style-type:none; 
    background:transparent; 
    height:3em; 

    } 



#header ul li { 

    display:inline; 
    color:#73a2bd; 

    } 



#container { 

    font-family: Arial, sans-serif; 
    font-size: 1.2em; 
    position:fixed; 
    top:120px; 
    left:0; 
    bottom:20px; 
    right:0; 
    background:#fff; 
    padding:0; 
    width:1004px; 

} 



* html #container { 

    height:100%; 
    width:1004px; 

} 

#container img {margin:5px;} 


#main { 
    width:774px; 
    height:100%; 
    float:left; 
    overflow:auto; 
} 

#right { 
    width:228px; 
    height:100%; 
    float:right; 
    border-left:1px solid #73a2bd; 
    border-right:1px solid #73a2bd; 
} 



#footer { 

    position:absolute; 
    bottom:0; 
    left:0; 
    width:1004px; 
    height:19px; 
    overflow:auto; 
    text-align:center; 
    background:#73a2bd; 
    border-top:1px solid #35759a; 

} 

* html #footer {height:20px;} 

#footer p { 

    color:#fff; 
    margin:2px 0 0 0; 

} 

</style> 

</head> 


<body> 

    <div id="header"> 

     <p>HEADER</p> 

    </div> 

    <div id="container"> 


     <div id="main"> 

      <p> 
       MAIN 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

      </p> 

     </div> 
     <div id="right"> 

      <p> 
       RIGHT 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      </p> 

     </div> 

    </div> 

    <div id="footer"> 

     <p>FOOTER</p> 

    </div> 


</body> 

</html>

來源

2012-02-16 user1212592

裹所有頂級元素（標題，容器和主）在另一個div給它的一組寬度和下面的餘量：「保證金：0汽車;」

編輯：我把我的話回來。我誤解了你最初的問題。對於頁眉和頁腳，您需要將它們包裹在絕對定位的錨定到頂部或底部的div中。確保這些元素的寬度爲100％。然後爲內部元素設置邊距爲「0 auto」。我會在一秒內發佈一個JS Fiddle示例。

編輯2：這是我走到這一步：http://jsfiddle.net/NfSKf/

來源

2012-02-16 01:08:34

非常感謝您的幫助。它似乎適用於所有主流瀏覽器。有沒有人有任何其他改進，使佈局更好？ – user1212592 2012-02-16 05:54:12

特殊的2與CSS的列布局

回答

相關問題