公告

最小高度100%页脚保持在底部的布局方法 (4)

2008-01-08 10:42:04 作者：来源：互联网浏览次数：61 文字大小：【大】【中】【小】

简介：有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究 ...

关键字：保持布局

5、举一反三，利用上面的原理我们还可以做一个一边固定宽度一边自适应宽度的液态弹性布局，修改一些宽度然后给 #content-box 下面再套一层就可以实现了。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer Stick</title>
<style type="text/css">
/*<![CDATA[*/
* {
 margin: 0;
 padding: 0;
}
html, body {
 height: 100%;
 text-align: center;
 font: 12px/1.4 Verdana, sans-serif;
}
#wrapper {
 width: 100%;
 min-height: 100%;
 background: #ccc;
 margin: auto;
 text-align: left;
}
* html #wrapper {
 height: 100%;
}
#header {
 background: Green;
 height: 40px;
}
#out-content {
 padding-bottom: 50px;
}
#out-content:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html #out-content {
 height: 1%;
}
#sidebar {
 float: left;
 background: Gray;
 margin-right: -200px;
 width:200px;
}
#content-box {
 float: right;
 width: 100%;
 background: Olive;
}
#content {
 margin-left: 200px;
}
#footer {
 height: 50px;
 background: Background;
 margin: -50px auto 0;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <h3>header</h3>
    <code>#header {
    background: Green;
    height: 40px;
    }</code> </div>
  <div id="out-content">
    <div id="content-box">
      <div id="content">
        <h3>content</h3>
        <code>#content {
          float: right;
          width: 80%;
          background: Olive;
        } </code></div>
    </div>
    <div id="sidebar">
      <h3>sidebar</h3>
      <code>#sidebar {
      float: left;
      width: 20%;
      background: Gray;
      }</code> </div>
  </div>
</div>
<div id="footer">
  <h3>footer</h3>
  <code>#footer {
  height: 50px;
  background: Background;
  width:770px;
  margin: -50px auto 0;
  }</code> </div>
</body>
</html>

其他问题，如果有人希望中间两栏高度相同的话可以使用图片欺骗法，见创建各栏同高的多栏布局。

OK，经过以上方法，这个布局应该是比较完美了。

[1] [2] [3] [4]

发表评论　加入收藏　告诉好友　打印本页　关闭窗口　返回顶部

推荐

公告

最小高度100%页脚保持在底部的布局方法 (4)