Question

我正在尝试创建一个网页布局模板，我的目标是页眉，页脚和2列之间，2列是什么让我最头痛，我希望左列是固定宽度，右列为了填补剩下的区域，我也成功地完成了这个。但是我也希望两个列都能垂直填充下雨空间，当内容填充的空间超过空间时我会看到每个列分别被骂，而不是使用普通的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

要将整个宽度填充为两列，其中一列已固定，请参阅this question。

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

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

有些人认为最好将高度应用于html元素。我有疑虑，因为那个标签不可见。

如果您的元素也需要一些高度，例如页眉或页脚，请参阅the same solution for fixed width's，但请将其应用于高度。

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

1 个答案: