Css 如何保持页脚在页面底部？
我希望我的页脚停留在页面的最底部，而不是我的屏幕底部，或者一个到处跟着我的粘性页脚，我希望它停留在最后Css 如何保持页脚在页面底部？,css,position,footer,Css,Position,Footer,我希望我的页脚停留在页面的最底部，而不是我的屏幕底部，或者一个到处跟着我的粘性页脚，我希望它停留在最后 #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);
#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>
<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>
墨西哥Dsn
塞古里达工业公司
产品
隐藏
伦茨。
马塞纳斯·阿利奎特·维利特·维利·维利·维利·图皮斯。莫里斯·内克·梅特斯、马莱苏达·内克、尤里西斯·塞特·阿梅特、波特提托·马蒂斯、埃尼姆。在马萨自由城，内特杜姆nec，内特杜姆维尔，布兰迪塞德，努拉。在乌拉姆科珀（ullamcorper），这是一个暂时的诅咒，是一个神圣的诅咒。每一个红锥虫，每一个处女膜吸入器都有一个合适的社会等级。不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料。Nunc convallis pede门。
呼吸机。
马塞纳斯·阿利奎特·维利特·维利·维利·维利·图皮斯。莫里斯·内克·梅特斯、马莱苏达·内克、尤里西斯·塞特·阿梅特、波特提托·马蒂斯、埃尼姆。在马萨自由城，内特杜姆nec，内特杜姆维尔，布兰迪塞德，努拉。在乌拉姆科珀（ullamcorper），这是一个暂时的诅咒，是一个神圣的诅咒。每一个红锥虫，每一个处女膜吸入器都有一个合适的社会等级。不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料。Nunc convallis pede门。
关特人。
马塞纳斯·阿利奎特·维利特·维利·维利·维利·图皮斯。莫里斯·内克·梅特斯、马莱苏达·内克、尤里西斯·塞特·阿梅特、波特提托·马蒂斯、埃尼姆。在马萨自由城，内特杜姆nec，内特杜姆维尔，布兰迪塞德，努拉。在乌拉姆科珀（ullamcorper），这是一个暂时的诅咒，是一个神圣的诅咒。每一个红锥虫，每一个处女膜吸入器都有一个合适的社会等级。不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料、不含酒精的饮料。Nunc convallis pede门。
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 */
}
从你提问的措辞来看，我认为你不想要粘脚，所以下面的答案是基于这个假设的 删除
position:absoluteposition: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:absoluteabsolutefixed
位置：绝对