如何正确定位页脚？

如何解决如何正确定位页脚？

| 我想将页脚定位在#wrapper的基线上，但我似乎能做的就是将页脚定位在包装器下方。有人可以告诉我为什么会这样吗？另外，如果有人对我目前的设计方式有疑问，并且有更好的方法，我可以提出任何建议。

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>sd</title>
<style type=\"text/css\">
  html,body {
  width:100%;
  background:brown;
  border:0px solid red;
  margin:0;
  padding:0;
  }
  #wrapper {
  width:1220px;
  height:750px;
  padding:0;
  margin:0 auto;
  background:#ccc;
  border:3px solid white;
  }
  #header {
  background-color:#aaa;
  width:100%;
  height:100px;
  padding:0;
  margin:0 auto 0 auto;
  border:0px solid;
  }
  #content {
  float:left;
  width:100%;
  height:649px;
  padding:0;
  margin:0;
  border:0px solid;
  }
  #cell-left {
  background-color:#bbb;
  float:left;
  width:200px;
  height:100%;
  padding:0;
  margin:0;
  border:0px solid;
  }
  #cell-right {
  float:right;
  width:1010px;
  height:100%;
  padding:0;
  margin:0;
  border:0px solid;
  }
  #footer {
  float:left;
  width:100%;
  height:25px;
  padding:4px;
  margin:0;
  text-align:center;
  border:1px solid;
  }
  </style>
</head>
<body>
  <div id=\"wrapper\">
    <div id=\"header\"></div>
    <div id=\"content\">
      <div id=\"cell-left\">dsssd</div>
      <div id=\"cell-right\">dsssd</div>
    </div>
    <div id=\"footer\">sdsd</div>
  </div>
</body>
</html>

解决方法

您应该删除#wrapper（height:750px）上的固定高度，并正确清除#wrapper内的浮动元素。最简单的方法是将overflow: hidden加到#wrapper。请参阅：http：//jsbin.com/iciwo6 更改后的CSS：

#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}

,您提到包装纸的高度750表示有问题，请弄清楚并给出height:auto 你给了

 header:  `height:100px;` 
content: height:649px;

所以几乎要花750像素。因此页脚没有空间。因此它正好位于包装器下方。因此请尝试设置height：auto。