html - para - lista de codigos css
¿Cómo puedo forzar a mi pie de página para que se quede en la parte inferior de cualquier página en CSS? (10)
Este es mi código:
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
No tengo idea de lo que está mal con esto, ¿alguien puede ayudarme?
EDITAR: Para mayor claridad sobre lo que está mal: el pie de página se muestra en la parte inferior como se espera cuando se carga la página. Sin embargo, cuando la altura de la página web es> mayor que las dimensiones en la pantalla, de modo que aparece una barra de desplazamiento, el pie de página permanece en esa misma ubicación. Es decir, cuando la altura de la página es <= 100%, el pie de página está en la parte inferior. Sin embargo, cuando la altura de la página es> 100%, el pie de página NO está en la parte inferior de esa página, sino en la parte inferior de la pantalla visible.
EDIT: Sorprendentemente, ninguna de las soluciones a continuación funcionó. Terminé implementando una barra lateral en su lugar.
¿Por qué no con jQuery?
Coloque una división de envoltura entre el encabezado y el pie de página y asigne la propiedad min-height para la envoltura con jQuery igual a la diferencia entre la altura del documento y (altura del encabezado + altura del pie de página).
<script type="text/javascript">
$(document).ready(function(){
var dh = $(document).height(); //document height here
var hh = $(''header'').height(); //header height
var fh = $(''footer'').height(); //footer height
var wh = Number(dh - hh - fh); //this is the height for the wrapper
$(''#wrapper'').css(''min-height'', wh); //set the height for the wrapper div
});
</script>
El envoltorio es el resto de tu página. Los valores de margen / altura negativos / positivos son donde ocurre la magia.
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push
{
height: 142px; /* .push must be the same height as .footer */
}
Esto es lo que hice y causó que mi pie de página permaneciera en la parte inferior.
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
Luché por encontrar una solución, ya que ninguno de los sugeridos logró lo que quería:
- Si hay menos contenido, permanezca en la parte inferior de la página, no en el medio.
- Si hay suficiente contenido, no se pegue y se superponga al contenido, simplemente permanezca en la parte inferior.
- Ocúltelo desde la primera vista, así que solo si el usuario se desplaza hacia abajo, se ve el pie de página.
Esto es lo que funcionó para mí:
html:
<body>
<div class="page-wrapper">
<h1>
Page
</h1>
</div>
<footer>
Footer here
</footer>
</body>
css:
body {
height: 100%;
width: 100%;
}
.page-wrapper {
min-height:100vh; /*1vh = 1% of browser screen height*/
}
footer{
position: relative;
width: 100%;
bottom: 0px;
}
Here en acción.
No use posición: absoluta; para cualquier pie de página ya que la página cambiará de altura. Si es absoluto, su pie de página no se moverá con la altura de la página.
Quieres usar el método de ryan fait.
Aunque personalmente lo haría así;
.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}
<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>
De esta manera, no tiene que perder el tiempo con los márgenes negativos y el relleno. También esto puede ser fácilmente una parte de html5 cambiando #footer a
<footer>
</footer>
Probablemente estés buscando este ejemplo :
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
CSS:
Para un pie de página de 142 píxeles
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 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Prueba esto:
position: fixed;
bottom: 0;
Tuve la misma pregunta, vine aquí buscando una respuesta, no la encontré, luego probé algunos experimentos por mi cuenta y finalmente obtuve la solución :
#body {
overflow-y: 0 auto;
}
#footer {
position: fixed;
top: 100vh; left: 0;
margin-top: -100px;
width: 100%; height: 100px;
padding: 10px;
color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
<span>Some dummy Text</span>
</div>
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
.footer-small, .push {
background-color: #2C3E50;
position: fixed;
padding-top: 5px;
clear:both;
width: 100%;
bottom:0px;
z-index: 0;
}
esto también está funcionando para mí ...