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

Question

I am attempting to create a webpage layout template my aim is header, footer and 2 column between, the 2 columns are what are giving me the biggest headache, I want the left column to be a fixed width, and the right column to fill the remaining area, I have successfully completed this also. 我正在尝试创建网页布局模板，我的目标是页眉，页脚和第二列之间，这两列让我感到最头疼，我希望左列为固定宽度，而右列填充剩下的区域，我也已经成功完成了。 But I also want both columns' to fill the raining space vertically also and when the content fills more than the space I am looking each column to be scolded separately and not use the normal Brower scroll bar 但是我也希望这两列也垂直填充雨水空间，当内容填充的空间超过该空间时，我希望每列都应单独责骂，而不要使用正常的Brower滚动条

My current html code is as follows 我当前的html代码如下

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 的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;
}

If anyone has a better or know what I can do to make this work sucessfully please let me know 如果有人有更好的产品或知道我可以做些什么来使这项工作成功完成，请告诉我

Vip32 Vip32

Answer 1

To fill the entire width with two columns where one has a fixed with, please refer to this question . 要用两列固定一个的固定宽度填充整个宽度，请参考此问题。

Vertical filling is a little different. 垂直填充略有不同。 On default, the body and block elements have a dynamic height. 默认情况下， body和block元素具有动态高度。 Because the body is dynamic too, you have to set it an height in order to make the content full vertically as well. 由于body也是动态的，因此必须将其设置为高度，以使内容也垂直充满。

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

Some people think it's best to apply an height to the html element as well. 有人认为最好也将高度应用于html元素。 I have my doubts, because that tag is not visible. 我对此表示怀疑，因为该标签不可见。

If you have an element that requires some height as well, like an header, or footer, please refer to the same solution for fixed width's but apply it on the height instead. 如果您的元素也需要一定的高度（例如页眉或页脚），请针对固定宽度参考相同的解决方案，而应将其应用于高度。

带有页眉，页脚和多列的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