特殊的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的列布局

回答

相关问题