0

我正在尝试创建一个网页布局模板，我的目标是页眉、页脚和 2 列之间，2 列是最让我头疼的，我希望左列是固定宽度，右列填充剩下的区域，我也成功完成了这个。但我也希望两列也垂直填充下雨空间，当内容填充的空间超过空间时，我希望每列分别被责骂，而不是使用正常的浏览器滚动条

我当前的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;
}

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

贵宾32

4

1 回答 1

1

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

垂直填充有点不同。默认情况下，bodyandblock元素具有动态高度。因为它body也是动态的，所以您必须设置它的高度以使内容也垂直填充。

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

有些人认为最好也对html元素应用高度。我有疑问，因为该标签不可见。

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

于 2013-02-15T12:31:07.987 回答