Question

我一直试图想出一个特殊的2列布局。

基本上这些是要求

固定宽度并居中
身高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>

Answer 1

将所有顶级元素（标题，容器和主要元素）包装在另一个div中，给它设置一个宽度和以下边距：“margin：0 auto;”

编辑：我接受了我的话。我误解了你最初的问题。对于页眉和页脚，您需要将它们包装在一个固定在顶部或底部的绝对定位div中。确保这些元素的宽度为100％。然后将内部元素的边距设置为“0 auto”。我将在一秒内发布一个JS小提琴示例。

编辑2：这是我到目前为止所得到的：http://jsfiddle.net/NfSKf/

使用CSS的特殊2列布局

1 个答案: