-2

christianselig.com/contact

何らかの理由で、この 1 つのページのフッターはページの途中までしか貼り付けられていませんが、他のすべてのページは問題ないように見えます。私は何年にもわたって探してきましたが、その理由を突き止めることはできません.

関連する HTML と CSS を以下に示しましたが、それ以上のものは明らかに利用可能です。

HTML:

                <div class="alt-contact">
                    <p>Prefer manual contacting? <a href="mailto:me@example">Email me.</a></p>
                </div>
            </div> <!-- This div corresponds to the content wrapper div above -->

            <div class="footer-wrapper">
                <div class="footer">
                    <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>

CSS:

.footer-wrapper {
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #ccc;
    bottom: 0;
    height: 16px;
    overflow: hidden;
    padding: 8px 0 5px 0;
    position: absolute;
    width: 100%;
}

    .footer {
        color: #808080;
        clear: both;
        font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
        font-size: 0.7em;
        margin: auto;
        width: 900px; 
    }
4

2 に答える 2

2

あなたが持っている必要があります：

html,
body {
    height: 100%;
}

あなたhtmlはそれheightに与えられていないので、それはそれをbody押すだけの高さです. IE8 以下では、 Ryan Fait の Sticky Footer のような「トリッカー」ソリューションを使用する必要があることに注意してください。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* the bottom margin is the negative value of the footer's height */
    margin: 0 auto -142px; 
}
.footer, .push {
    /* .push must be the same height as .footer */
    height: 142px; 
}

/* Sticky Footer by Ryan Fait
   http://ryanfait.com/       */

私はそれを使用しました。できます。ただし、本質的marginにpadding柔軟性が失われるため、頭痛の種になります。これは苦痛になる可能性があります。

于 2012-09-16T18:03:43.937 に答える
0

はい、position: absolute;スティッキー フッターを作成しないためです。粘着性のあるフッターが必要な場合は、 を使用する必要がありますposition: fixed;。これにより、フッターは、次の関連する親オブジェクトではなく、ブラウザー ウィンドウに対して相対的に同じ場所にとどまります。

幸運を
祈ります- ブライアン

于 2012-09-16T17:58:29.970 に答える