css - CSS 粘滞页脚

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

score 0 · Accepted Answer

0

尝试这个：

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

于 2012-11-18T07:04:13.123 回答

score 0 · Accepted Answer

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

看看我的 jsfiddle

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

看看我是如何做到的，并随意使用代码；D

我试着查看你的代码，但你有一个简单的答案。首先，您肯定需要修复 NullPonyPointer 指出的那些 HTML 注释。我还发现了一个需要删除的额外内容</div>，并且在您的CSS中需要</div><!--end more stories div--!>#contentpadding-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>

score 0 · Accepted Answer

这不是一个有效/正确的评论

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

css - CSS 粘滞页脚

3 回答 3

Related

Reference