0

私はこの質問が何百万回も聞かれたことを知っています、そしてそれについての百万の記事があります。提供されているソリューションのいくつかを試しましたが、どれもうまくいきませんでした。私はHTML/CSSを数か月間使用しているだけなので、まだあまり上手ではありません。誰かが私を助けてくれるのに十分な時間を割いてくれることを願っています。

ブログのレイアウトを作成していますが、フッター以外はすべて正常に機能しているようです。ページの一番下にとどまることができません。現在、コンテンツの途中に浮かんでいます。ページの下部に固定され、ページのコンテンツが非常に短い場合にのみ表示されるフッターが必要です。つまり、position：fixedを使用して実現できるフッターではなく、このWebサイトにあるようなフッターが必要です。私は自分が何を間違っているのか本当にわかりませんが、私が言ったように、私はこのようなものに不慣れです。

これが私が現在使用しているコードですが、さまざまなチュートリアルに従って大幅に変更しており、何も機能していません。

また、私はこれが初めてなので、経験豊富な人が私が間違っているフッターに関係のない何かを見た場合は、それを指摘していただければ幸いです。正しい方法。

ありがとう！！

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

3 に答える 3

0

これは有効な/正しいコメントではありません

 <!--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-18T07:02:49.377 に答える
0

これを試して： 

#footer{position:absolute; bottom:0;}
于 2012-11-18T07:04:13.123 に答える
0

この質問が解決されたかどうかはわかりませんが、同じ問題がありました。多くの調査と何時間にもわたるイライラするコーディングの後、私は最終的に、たとえそれを一番下に押し込むのに十分なコンテンツがなくても、ウィンドウの一番下にくっつく粘着性のあるフッターを思いつくことができました. (ウィンドウのサイズに関係なく) どのコンテンツとも重ならず、代わりにコンテンツの下部で停止しました。

私の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>
于 2013-03-20T08:41:22.433 に答える