Question

我知道这个问题已被问过一百万次，而且有一百万篇关于它的文章。我尝试了几种解决方案，但没有一种方法适合我。我一直只使用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; }

Answer 1

这不是有效/正确的评论

 <!--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;}

Answer 2

试试这个：

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

Answer 3

我不知道这个问题是否已经解决，但我遇到了同样的问题。经过大量的研究和数小时令人沮丧的编码后，我终于能够找到粘在任何窗口底部的粘性页脚，即使没有足够的内容将其推到底部，最好的部分是它没有重叠任何内容（无论窗口的大小），而是停在内容的底部。

查看我的jsfiddle

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

看看我是如何制作的，并随意使用代码; D

我试着查看你的代码，但是你有一点点要做一个简单的答案。首先，你肯定需要修复像NullPonyPointer指出的那些HTML注释。我还在</div>下发现需要删除的额外</div><!--end more stories div--!>，#content CSS padding-top150px;需要padding-top: 150px;（您忘记了分号）。我认为在尝试解决您的问题时我忽略了一些其他错误，因为最终，由于某些原因，我无法使用您提供的代码使粘性页脚正常工作。我建议重新开始使用更少的代码，然后在获得粘性页脚后再慢慢添加以前的代码。我尽量使小提琴尽可能简单，并在HTML和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>

CSS粘滞页脚

3 个答案: