CSS Sticky Footer

我知道這個問題已被問及一百萬次，並有一百萬篇關於它的文章。我嘗試了幾種提供的解決方案，但沒有一個適合我。我只在HTML和CSS上工作了幾個月，所以我現在還不是很好，我希望有人能夠花時間幫助我。CSS Sticky Footer

我創建了一個博客佈局，除了頁腳，一切似乎都正常。我無法讓它留在頁面的底部。現在它正在內容的中間浮動。我想要一個固定在頁面底部的頁腳，並且只有在頁面上的內容很短時纔可見。換句話說，我想要一個像這個網站上的頁腳，而不是我可以使用的位置：fixed。我真的不知道自己做錯了什麼，但就像我說的，我是新手。

下面是我目前使用的代碼，儘管根據各種教程我已經對它進行了很多改變，並且沒有任何功能可以用於我。

此外，由於我是新手，如果您有更多有經驗的人看到與頁腳不相關的東西，我做錯了，我將不勝感激，如果您可以指出，所以我可以學習如何以正確的方式做這件事。

謝謝！

<body> 
    <div id="outer"> 
    <div id="header"> 
     <div id="wrap"> 
     <div class="logo"><a href="#"><img src="images/logo.png" /></a> 
     </div><!--end logo div--!> 

    </div><!--end wrap div--!> 
    </div><!--end header div--!> 
    <div id="wrap"> 
    <div id="content"> 

    <div class="featured_title"><a href="#">Example Title One</a></div> 
    <div class="featured_category"><p>Posted in <a href="#"> News</a></p> 
    </div><!--end cateogry div--!> 
    <div class="featured_excerpt"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 

    malesuada in orci ornare et porta nisi tristique. Integer sodales feugiat  </p> 
    </div><!--end featured excerpt div--!> 
    <div class="featured_read"> 
    <p><a href="#">Read More</a></p> 
    </div><!--end featured_read div--!> 

    <div id="post_thumbnail"> 
    <img src="images/sample_pic.jpg" /> 

    </div> 
    <div id="post content"> 
    <div id="post_info"> 
    <div class="post_title"> 
    Example Title Two 
    </div><!--end post title div--!> 
    <div class="category"> 
    Posted in <a href="#"> Career Tips</a> 
    </div> 
    <div class="post_excerpt"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuad 
     </p> 
    </div><!--end post excerpt div--!> 
    <div class="read_post"> 
    <p><a href="#">Read More</a></p> 
    </div><!--end read post div--!> 
    </div><!--end post info div--!> 
    <div class="divider"><img src ="images/divider.png" /></div> 
    </div><!--end post content div--!> 
    <div class="more_stories"> 
    <p><a href="#">Previous Stories</a></p> 
    </div><!--end more stories div--!> 


    </div> 

    </div><!--end content div--!> 
    </div><!--end wrap div---!> 
    <div id="wrap"> 
    <div id="sidebar"> 
    <div class="job_search"> 
    <a href=#"><img src="images/job_search.png" /></a> 
    </div> 

    <div class="post_job"> 
    <a href="#"><img src="images/post_job.png" /></a> 
    </div><!--end post_job div--!> 

    </div><!--end sidebar div--!> 

    </div><!--end wrap div--!> 

    </div><!--end outer div--!> 
    <div id="footer"> 

    </div><!--end footer div--!> 



    </body>

而CSS

html {height:100%; padding:0; height:100%; } 

    body { margin: 0 0 40px; background: #f4f4f4; height:100%; } 


    #wrap { margin: 0 auto; width: 940px; } 

    /* Header */ 

    #header { width:100%; height: 50px; background: #000; repeat:x; } 

    .logo { margin-left:380px; } 


    /* End Header Section */ 

    /*main content section*/ 

    #content { width: 558px; padding: 15px; float:left; position:absolute; 
    padding-top150px; min-height:100%; } 

    .featured_title { font-family:Georgia, serif; font-size: 1.7em; color: #4e4e4e; } 

    .featured_title a { text-decoration:none; color: #4e4e4e; } 

    .featured_title a:hover { text-decoration:underline; } 



    .featured_category { font-weight:bold; font-family: Helvetica, sans-serif; 
    color:#4e4e4e; font-size: 1em; } 

    .featured_category a{ font-weight:bold; color: #d76186; font-size: 1em; 

    text-decoration:none; } 

    .featured_category a:hover { color:#68acc2; } 

    .featured_excerpt { color:#4e4e4e; font-family:helvetica, sans-serif; font-size: 

    .9em;} 

    .featured_read a { font-weight:bold; color:#d76186; font-size: 1em; 
    text-decoration: none; font-family:helvetica, sans-serif; } 

    .featured_read a:hover { color:#68acc2; } 

    .featured_read { border-bottom: 2px solid #4e4e4e; padding-bottom: 5px; } 

    #post_thumbnail { width:300px; height:200px; padding-top:9px; position:absolute;} 

    #post_info { position:relative; height:200px; width:248px; left:320px; top:15px; } 

    .post_title { font-family:georgia, serif; font-size:1.2em; color: #4e4e4e; } 

    .category { font-weight:bold; color: #4e4e4e; font-size:.8em; 
    font-family:helvetica, sans-serif; padding-top:3px; } 

    .category a{ font-weight:bold; color:#d76186; text-decoration:none; } 

    .category a:hover { color:#68acc2; } 

    .post_excerpt { color:#4e4e4e; font-family:helvetica, sans-serif; font-size:.8em; } 

    .read_post a { font-weight:bold; color:#d76186; font-size: .8em; 
    text-decoration:none; font-family:helvetica, sans-serif; } 

    .read_post a:hover { color:#68acc2; } 

    .divider { padding-top:25px; } 

    .more_stories a{ text-decoration:none; font-family:helvetica; color: #d76186;} 

    .more_stories a:hover {color: #68acc2;} 

    /* sidebar */ 
    #sidebar { width:317px; left:20px; top:0; position:relative; float:right; 
    min-height:100%; } 

    .job_search { padding-bottom:20px; } 

    /* Footer */ 

    #footer { clear:both; bottom:0; background:#000; width:100%; 
    height:35px; margin-top: -100px; position:relative; } 

    .footer_content { font-family:helvetica, sans-serif; color: #68acc2; }

來源

2012-11-18 libra99

這不是一個vallid /右評論

<!--end logo div--!>

應該

<!-- end logo div -->

，並嘗試

<div id="wrapper"> 
    <div id="main" class="clearfix"> 
    </div> 
</div> 

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

CSS

html, body, #wrapper{ height: 100%; } 
body > #wrapper{height: auto; min-height: 100%;} 
#main { padding-bottom: 150px; } /* same height as the footer */ 
#footer { 
     position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

.clearfix:after {content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;} 
.clearfix {display: inline-block;}

來源

2012-11-18 07:02:49

這對我沒有用。我所做的是刪除#content div中的絕對位置，它似乎工作。我還沒有在IE中測試過它 – libra99

試試這個：

#footer{position:absolute; bottom:0;}

來源

2012-11-18 07:04:13 rzShrestha

這是我第一次嘗試。不幸的是，頁腳仍處於頁面中間。 – libra99

我不知道，如果這個問題已經解決了，但我有同樣的問題。經過大量的研究和幾個小時的令人沮喪的編碼之後，我終於能夠想出一個粘在任何窗口底部的粘性頁腳，即使沒有足夠的內容將它推到底部，最好的部分是它沒有重疊任何內容（不管窗口的大小），而是停在內容的底部。

看看我的jsfiddle

http://jsfiddle.net/juroto/HL6Ad/

，看我怎麼做它和隨意使用的代碼; d

我試圖尋找在你的代碼，但你有一個位很簡單的答案。首先你肯定需要修復NullPonyPointer指出的那些HTML筆記。我還抓到了額外的</div>，其中</div><!--end more stories div--!>需要刪除，並且您的#content CSS padding-top150px;需要爲padding-top: 150px;（您忘記了分號）。我認爲在嘗試解決問題時我忽略了一些其他錯誤，因爲最終，出於某種原因，我無法使粘滯頁腳與您提供的代碼正常工作。我會建議從少量代碼開始，然後在讓粘性頁腳工作之後，再慢慢添加以前的代碼。我試圖讓小提琴儘可能地簡單，並且我在HTML & CSS筆記中留下了非常詳細的說明。對不起，我無法確切地告訴你在你的代碼中需要改變什麼，但希望小提琴可以幫助你！否則，我只想從這裏開始：

<!doctype html> 

    <head> 

     <title>INSERT TITLE</title> 

     <style> 
      body { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
      } 
      html { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      * html #wrapper { 
       height:100%; 
      } 
      #wrapper { 
       min-height: 100%; 
       position: relative; 
      } 
      #content { 
       padding-bottom: 30px; /* ATTENTION! padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */ 
       font-size: 10em; /* ATTENTION! this font-size can be deleted or changed to whatever your heart desires*/ 
      } 
      #footer { 
       position: absolute; 
       width: 100%; 
       clear: both; 
       bottom: 0; 
       padding: 0; 
       margin: 0; 
       /* ATTENTION! The following elements below 
       can be set to whatever your heart desires */ 
       height: 30px; /* REMEMBER #footer height = #content padding-bottom */ 
       background: #333; 
      } 
     </style> 

    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="content">INSERT CONTENT HERE</div> 
      <div id="footer"></div> 
     </div> 
    </body> 
</html>

來源

2013-03-20 08:41:22 juroto

回答

相關問題