CSS 粘性页脚-6ren

CSS 粘性页脚

转载作者：行者123 更新时间：2023-11-28 13:32:06

我知道这个问题已被问过一百万次，并且有一百万篇关于它的文章。我尝试了几种提供的解决方案，但没有一个对我有用。我只断断续续地使用 HTML/CSS 几个月，所以我还不是很擅长，我希望有人能花时间帮助我。

我正在创建一个博客布局，除页脚外，一切似乎都运行良好。我不能让它留在页面底部。现在它漂浮在内容的中间。我想要一个固定在页面底部的页脚，并且仅在页面内容很短时才可见。换句话说，我想要一个像本网站上那样的页脚，而不是我可以使用 position: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; }