Layout 带有CSS的特殊2列布局_Layout_Css

Layout 带有CSS的特殊2列布局

layout css

Layout 带有CSS的特殊2列布局,layout,css,Layout,Css,我一直在试图想出一个特殊的2列布局基本上这些都是要求定宽定心高度100% 页眉和页脚始终可见 2列内容（主-右）主列在溢出时滚动右栏固定这是我到目前为止的代码。我只是没能集中注意力整个布局。住在代码特殊2列布局身体{ 保证金：0；边界：0；填充：0；身高：100%；最大高度：100%；背景：#fff；字体系列：arial，verdana，无衬线；字体大小：76%；溢出：隐藏； } *html正文{ 填充：120px 0 20px 0； } #标题{ 位

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

基本上这些都是要求

定宽定心
高度100%
页眉和页脚始终可见
2列内容（主-右）
主列在溢出时滚动
右栏固定

这是我到目前为止的代码。我只是没能集中注意力整个布局。
住在

代码


特殊2列布局
身体{
保证金：0；
边界：0；
填充：0；
身高：100%；
最大高度：100%；
背景：#fff；
字体系列：arial，verdana，无衬线；
字体大小：76%；
溢出：隐藏；
}
*html正文{
填充：120px 0 20px 0；
}
#标题{
位置：绝对位置；
排名：0；
左：0；
宽度：1004px；
高度：119px；
溢出：自动；
背景#73a2bd；
边框底部：1px实心35759a；
文本对齐：居中；
}
*html#标题{高度：120px；}
#标题p{
颜色：#fff；
保证金：2px0；
}
#标题ul{
明确：两者皆有；
文本对齐：居中；
边框顶部：1px实心#73a2bd；
}
#标题ul{
保证金：0；
填充：0；
列表样式类型：无；
背景：透明；
高度：3em；
}
#标题ulli{
显示：内联；
颜色：#73a2bd；
}
#容器{
字体系列：Arial，无衬线；
字体大小：1.2米；
位置：固定；
顶部：120px；
左：0；
底部：20px；
右：0；
背景：#fff；
填充：0；
宽度：1004px；
}
*html#容器{
身高：100%；
宽度：1004px；
}
#容器img{margin:5px；}
#主要{
宽度：774px；
身高：100%；
浮动：左；
溢出：自动；
}
#对{
宽度：228px；
身高：100%；
浮动：对；
左边框：1px实心#73a2bd；
右边框：1px实心#73a2bd；
}
#页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：1004px；
高度：19px；
溢出：自动；
文本对齐：居中；
背景#73a2bd；
边框顶部：1px实心35759a；
}
*html#页脚{高度：20px；}
#页脚p{
颜色：#fff；
保证金：2px0；
}
标题

主要













































































正确的


























页脚

在另一个div中包装所有顶级元素（header、container和main），为其指定一个设置的宽度和以下边距：“边距：0自动

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

编辑2：以下是我目前得到的信息：

非常感谢您的帮助。它似乎适用于所有主流浏览器。有人有任何其他的改进，使布局更好吗？

<!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>