-1

フッターを画面の一番下ではなく、ページの一番下に配置したいのですが、どこにでも付いてくる粘着性のあるフッターではなく、最後に配置したいのです!!

#footer ul {
width: 100%;
height: 30px;
z-index: 10;
position: absolute;
bottom: 0px;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
font-size: .65em;
border-top: 1px solid rgba(0,0,0,0.4);
}

私のフッターはこのコンテナの中にあります

#container {
font-family: 'Syncopate', sans-serif;
width: 100%;
height: auto;
height: 100%;
min-height: 100%;
margin: 0 auto;
left: 0;
}

HTML コード

<html>
<head>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
</head>
<body>

    <div id="container">
        <div id="header">
                <span class="icon"><img src="img/safety_icon5.png"></span>
                <span class="logo">Dsn de Mexico</span><br>
                <span class ="logosub">Seguridad Industrial</span>
            <div id="nav">
                <ul>
                    <li><a href="#">Contactenos</a></li>
                </ul>
            </div>
        </div>

        <div id="content">
            <span class="products_title">Productos</span>
            <span class="fill_h">hide</span>
            <div class="products_grid"><a href="#"></a>
                <h3>Lentes.</h3>
                <img src="img/gafas seguridad.jpg" class="image">
                <p>
                    Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.
                </p>
            </div>
            <div class="products_grid">
                <h3>Respiradores.</h3>
                <img src="img/respirador.jpg" class="image">
                <p>
                    Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.
                </p>
            </div>
            <div class="products_grid">
                <h3>Guantes.</h3>
                <img src="img/guantes.jpg" class="image">
                <p id="widget">
                    Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.
                </p>
            </div>

        </div>
        <div id="extend_content">
            <img src="img/proveedores.jpg" alt="Nuestros Proveedores">
        </div>

        <div id="footer">
            <ul>
                <li><a href="#">Guantes</a></li>
                <li><a href="#">Overoles</a></li>
                <li><a href="#">Tapones</a></li>
                <li><a href="#">Lentes</a></li>
                <li><a href="#">Respiradores</a></li>
                <li><a href="#">Miscelaneos</a></li>
                <li><a href="#">Cuarto Limpio</a></li>
                <li><a href="#">Prod. Aluminizados</a></li>
            </ul>
        </div>



    </div>



</body>
<html>
4

2 に答える 2

1

質問の言い方からすると、粘着性のあるフッターは必要ないと思われるため、次の回答はその仮定に基づいています。

position: absoluteフッター要素を削除して、コンテンツの自然な流れに従うようにします。position: absolute要素をドキュメントの流れから外すように設定することは、通常、主要なページ要素には適していません。必要なのはこれだけです。

#footer ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
font-size: .65em;
border-top: 1px solid rgba(0,0,0,0.4);
}

スティッキーフッターが必要な場合position: absoluteは、とにかくそれを達成するための防弾の方法ではないため、それが必要な場合はさらに支援を提供できます.

于 2013-04-30T06:52:30.687 に答える