-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

2

使用粘性页脚

如此处所示

CSS

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
于 2013-04-30T06:50:30.803 回答
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 回答