歡迎您光臨本站 註冊首頁

轉:CSS瀏覽器絕對定位

←手機掃碼閱讀     火星人 @ 2014-03-04 , reply:0

轉:CSS瀏覽器絕對定位

逐浪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

[火星人 ] 轉:CSS瀏覽器絕對定位已經有633次圍觀

http://coctec.com/docs/service/show-post-14380.html