帶有頁眉，頁腳和多列的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