带有页眉，页脚和多列的css布局

Question

我正在尝试创建网页布局模板，我的目标是页眉，页脚和第二列之间，这两列让我感到最头疼，我希望左列为固定宽度，而右列填充剩下的区域，我也已经成功完成了。 但是我也希望这两列也垂直填充雨水空间，当内容填充的空间超过该空间时，我希望每列都应单独责骂，而不要使用正常的Brower滚动条

我当前的html代码如下

的HTML

<!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">
<head>
  <title></title>
    <link rel="stylesheet" type="text/css" href="./style/default/style.css" />
</head>
<body>
  <div class="container">
    <div class="header">
     HEADER
    </div>
    <div class="content">
      <div class="content-contain">
        <div id="content-col1">
         COLUMN 1
        </div>
        <div id="content-col2">
         COLUMN 2
        </div>
      </div>
    </div>
  </div>
<div class="footer">
  FOOTER
</div>
</body>
</html>

的CSS

* {
  margin: auto;
}

html, body {
  height: 99%;
  background-color: #FFFFFF;
  font-family:sans-serif;
}

.container {
  min-height: 100%;
  height: auto !important;
  height: 99%;
  margin: 0 auto -1em; 
}

.header {
  color:#FFFFFF;
  background-color:blue;
  border-bottom:3px solid blue;
}

div#content-col1{
  float:left;
  width:220px;
  padding:3px;
  display:block;
  padding-left:5px;
  overflow-y: auto; 
  background-color: red;
}

div#content-col2{
  margin-left: 230px;
  margin-bottom:40px;
  padding: 3px;
  overflow-y: auto;
  background-color: green; 
}

.footer {
  background-color:yellow;
  clear:both;
}

如果有人有更好的产品或知道我可以做些什么来使这项工作成功完成，请告诉我

Vip32

Answer 1

要用两列固定一个的固定宽度填充整个宽度，请参考此问题。

垂直填充略有不同。 默认情况下， body和block元素具有动态高度。 由于body也是动态的，因此必须将其设置为高度，以使内容也垂直充满。

body, div#container, ... { height: 100%; }

有人认为最好也将高度应用于html元素。 我对此表示怀疑，因为该标签不可见。

如果您的元素也需要一定的高度（例如页眉或页脚），请针对固定宽度参考相同的解决方案，而应将其应用于高度。

带有页眉，页脚和多列的css布局

问题描述

1 个解决方案

解决方案1
1 2013-02-15 12:31:07

带有页眉，页脚和多列的css布局

问题描述

1 个解决方案

解决方案1 1 2013-02-15 12:31:07

解决方案1
1 2013-02-15 12:31:07