0

私は現在ウェブサイトを構築しており、フッターをページの下部に固定する必要があります - 私は多少苦労しています - 以下は私の HTML と CSS の例です - ページが小さい場合はフッターを下部に固定する必要がありますが、ページが大きくなった場合は、ページとともに成長します。HTML:

<div class="container">
    <div class="main">
        <!-- some content -->
    </div>
</div>
<div class="clear"></div>
    <div id="footer">
        <div class="container">
            <div class="footer_nav">
                <h4>Site Map</h4>
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="food.php">Example Page 1</a></li>
                    <li><a href="#">Example Page 2</a></li>
                    <li><a href="#">Example Page 3</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="footer_copy">
                <p>&copy;<?php echo date('Y');?> Oliver Fletcher<br/>
                All Rights Reserved</p>
                <h4>Where I learnt...</h4>
                <img src="images/accreditations.jpg" alt="Team Treehouse">
            </div>
            <div class="footer_social">
                <a href="https://twitter.com/fletcher_oli" target="_blank"><img src="images/twitter.png" alt="Twitter"></a>
                <a href="https://www.facebook.com/oli.fletcher" target="_blank"><img src="images/facebook.png" alt="Facebook"></a>
                <a href="https://www.linkedin.com/e/fpf/183035612" target="_blank"><img src="images/linkedin.png" alt="LinkedIn"></a>
                <a href="https://plus.google.com/106172283538461109605/about" class="google" target="_blank"><img src="images/google.png" alt="Google"></a>
                <h4>Get in touch</h4>
                <a href="mailto:oli@thewebshare.co.uk">oli@thewebshare.co.uk</a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

CSS

html{
    height: 100%;
}  

.container{
    width: 980px;
    margin: auto;
    min-height: 100%;
    _height: 100%;
}

.main{
    margin-bottom: -183px;
    position: relative;
}

#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: relative;
padding: 20px 0;
height: 183px;
}
4

4 に答える 4

0

明らかに、これには多くの方法があります。このチュートリアルに従うと、同様にトリックが実行されます。

http://www.cssstickyfooter.com/using-sticky-footer-code.html

于 2013-06-06T22:57:23.313 に答える
0

私が目にする問題の 1 つは、コンテナー クラスの重複使用です。別のクラス名を使用して、コンテンツのコンテナとフッターのコンテナを用意するか、css セレクターを使用することができます

    body > .container

それ以外の場合は、.main の css を切り替えて、以下の css ルールを持つようにします。高さとパディングは同じ固定サイズである必要があります。

    .main
        padding-bottom: 100px;
    .footer
        height: 100px; // FIXED HEIGHT IS IMPORTANT

このような例はインターネット上にたくさんあります。私はこれを使用しましたが、うまく機能することがわかりました。これが役に立ったことを願っています。

于 2013-06-06T22:29:04.680 に答える
0

あなたが望むのは、.clearあなたの下とあなた#containerの上にCSS要素を割り当てることです#footer。基本的にフッターを押し下げて、下部にくっつくようにします。

このチュートリアルは役に立ちました。ページ全体がスティッキー フッター専用です。

固定フッターのチュートリアル

于 2013-06-06T22:29:18.750 に答える