close

好吧，其實我也沒有很認真地在學css。

只是突然想到某個功能，或是要去做，才會去做(無時無刻都是懶惰模式開啟) 

阿網頁常常用到的footer置底對我來說還蠻有用的，實作出來是ok的

以下是我在網路上看到的網址所提供的，更詳細的可點網址進去看喔!!!!

引用出處的網址：http://goo.gl/MwtnF

這個網址也介紹許多css其他功能，如果沒有很排斥英文的話，會受益良多。

阿下面只是我的備份檔XDD我就是沒辦法一直逛英文網頁的英文白癡阿

 

The HTML

  1. <body>
  2.     <div id="wrapper">
  3.         <div id="header"></div>
  4.         <div id="content"></div>
  5.         <div id="footer"></div>
  6.     </div>
  7. </body>

 

 

The CSS

 

  1. html,body {
  2.     margin:0;
  3.     padding:0;
  4.     height:100%;
  5. }
  7. #wrapper {
  8.     min-height:100%;
  9.     position:relative;
  10. }
  11. #header {
  12.     padding:10px;
  13.     background:#5ee;
  14. }
  16. #content {
  17.     padding:10px;
  18.     padding-bottom:80px;/* Height of the footer element */
  19. }
  21. #footer {
  22.     width:100%;
  23.     height:80px;
  24.     position:absolute;
  25.     bottom:0;
  26.     left:0;
  27.     background:#ee5;
  28. }

 

---------------------------------------以上是單純HTML + CSS，以下是CSS + JQUERY---------------------------------------

不得不說!!!使用css有時候真的調個半死結果還是不行，尤其是現在常常拿範本改真的會改到死= =

一樣，還是英文介面找到的footer置底，不喜歡英文的我又再次備份了阿哈哈哈哈哈哈，不用謝我

來源：http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

The HTML

<div id="footer">
    Sticky Footer
</div>

The CSS

#footer { height: 100px; }

 

重點來惹：

只要在HTML的<head></head>裡加上<script></script>裡頭再加上這一段就好了!!!

通常我會在另外載入一個js檔，分開管理比較好

 

// Window load event used just in case window height is dependant upon images

眼尖的人應該知道下面的樣式是從哪邊來的XDD

$(window).bind("load", function() {
　var footerHeight =0;
　var footerTop =0;
　 var $footer =$("#footer");
　 positionFooter();
 
　 function positionFooter() {
　　 footerHeight =$footer.height();
　　 footerTop = ($(window).scrollTop() +$(window).height() - footerHeight) +"px";
　　 if (($(document.body).height() + footerHeight) <$(window).height()) {
　　　 $footer.css({
　　　 　position:"absolute"
　　　 }).stop().animate({
　　　　 top: footerTop
　　　 });
　　 } else {
　　　 $footer.css({
　　　 position:"static"
　　　 });
　　 }
　 }
 
　$(window).scroll(positionFooter).resize(positionFooter);
});

 

 2016/11/10 我也沒想到我又會有來更新的一天！！！最後改成我最終版本這樣。也不確定是不是最終版本！！！

 其實跟上面的差不多，只是把動態效果拿掉(animate)

 因為我網頁樣式還是有點詭異，所以也修改一下。

$footer.css({
　　position:"absolute"
　　bottom:0//這段自己加的
}).stop().animate({
　　top: footerTop
});

恩，因為樣式沒使用到footerTop，所以上面有些程式碼應該可以拿掉XD，但因為還在使用中，先看看有沒有什麼問題好惹!!!!

 

使用bootstrap，footer置底

http://getbootstrap.com/examples/sticky-footer-navbar/

 

 

 

arrow
arrow
    文章標籤
    footer置底 css footer css jquery jquery footer bootstrap
    全站熱搜

    Kaikai凱開 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄