- 论坛徽章:
- 0
|
逐浪cms 华夏互联 网站建设 544472213
在各种浏览器里都能正常显示喔
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Sticky Footer Solution</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {margin:0;padding:0;}
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;margin:0 auto;clear:both}
#footer {position: relative;
margin-top: -150px;
height: 150px;
clear:both;
background-color:#B7B7B7;
}
#content {
padding-right: 0px; padding-left: 0px; float: left; padding-bottom: 25px; width: 45%; padding-top: 30px;background-color:#eee
}
#sidebar {
padding-right: 5px; padding-left: 10px; float: right; padding-bottom: 25px; width: 45%; padding-top: 30px;background-color:#eee
}
#header {
height:150px;background-color:#B7B7B7
}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}
</style>
</HEAD>
<BODY>
<div id="wrap">
<!-- header start -->
<div id="header">
header
</div>
<!-- header end -->
<!-- main content start -->
<div id="main" class="clearfix">
<!-- left -->
<div id="content">
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
</div>
<!-- right -->
<div id="sidebar">
The Sticky Footer solution presented here is based upon the information found in the Exploring Footers article from A List Apart as well as expands upon the work of Cameron Adams and this piece at lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts. It's been tested in over 50 browsers and seems to work great.
</div>
</div>
</div>
<!-- footer start -->
<div id="footer">
footer
</div>
</BODY>
</HTML>
复制代码页面头部，页面底部，以及页面主内容放在如下相应的位置就可以啰 <div id="wrap">
<div id="header">header</div>
<div id="main" class="clearfix">
<div id="content">content left</div>
<div id="sidebar">content right</div>
</div>
</div>
<div id="footer">footer</div>
复制代码
逐浪cms 华夏互联 网站建设 544472213 |
|
免费注册
发表于 2011-06-30 09:18