Question

我希望我的页脚停留在页面的最底部，而不是在屏幕的底部或者随处可见的粘性页脚，我希望它能够留在最后！

#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>

Answer 1

使用粘性页脚

如图所示 here

<强>的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 */
}

Answer 2

从您提出问题的方式来看，我假设您不想要一个粘性页脚，因此以下答案基于该假设。

删除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无论如何都不是一种防弹方式，所以如果您需要的话，可以提供进一步的帮助。

如何在页面底部保留页脚？

2 个答案: