bottom - responsive footer css
Flushing footer a la parte inferior de la página, Twitter Bootstrap (26)
Aquí encontrará el enfoque en HAML ( http://haml.info ) con la barra de navegación arriba y al pie de página en la parte inferior de la página:
%body
#main{:role => "main"}
%header.navbar.navbar-fixed-top
%nav.navbar-inner
.container
/HEADER
.container
/BODY
%footer.navbar.navbar-fixed-bottom
.container
.row
/FOOTER
En general, estoy familiarizado con la técnica de enjuagar un pie de página utilizando css y este enfoque siguiente .
Pero estoy teniendo algunos problemas para que este enfoque funcione para el programa de arranque de Twitter, probablemente debido al hecho de que el programa de arranque de Twitter es sensible en la naturaleza. Al usar Twitter bootstrap, no puedo hacer que el pie de página se descargue al final de la página utilizando el enfoque descrito en la publicación del blog anterior.
Aquí es cómo implementar esto desde la página oficial:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
¡Acabo de probarlo ahora mismo y FUNCIONA GRANDE! :)
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
El código CSS relevante es este:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it''s height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Aquí hay un ejemplo usando css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
Así es como lo hace bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Solo usa la fuente de la página y deberías poder ver. No olvides la <div id="wrap"> y la parte superior.
Bueno, encontré una mezcla de navbar-inner y navbar-fixed-bottom
<div id="footer">
<div class="navbar navbar-inner navbar-fixed-bottom">
<p class="muted credit"><center>ver 1.0.1</center></p>
</div>
</div>
Me parece bien y me funciona.
Ver ejemplo en Fiddle
Ejemplo oficial mucho más simple: http://getbootstrap.com/examples/sticky-footer-navbar/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
El único que trabajó para mí !:
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
En la última versión de bootstrap 4-alpha , pude hacerlo utilizando la clase .fixed-bottom .
<div class="fixed-bottom"></div>
Así es como lo uso con el pie de página:
<footer class="footer fixed-bottom container">
<hr>
<p>© 2017 Company, Inc.</p>
</footer>
Puede encontrar más información en la documentación de colocación here .
Encontré los fragmentos here funciona muy bien para bootstrap
HTML:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
Esta es la forma correcta de hacerlo con Twitter Bootstrap y la nueva clase de fondo fijo con barra de navegación: (no tienes idea de cuánto tiempo pasé buscando esto)
CSS:
html {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 50px;
}
#footer .navbar{
position: absolute;
}
HTML:
<html>
<body>
<div id="content">...</div>
<div id="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Esto ahora se incluye con Bootstrap 2.2.1.
Bootstrap 3.x
Use el componente de la barra de navegación y agregue la .navbar-fixed-bottom :
<div class="navbar navbar-fixed-bottom"></div>
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
No te olvides de agregar body { padding-bottom: 70px; } body { padding-bottom: 70px; } o de lo contrario el contenido de la página puede ser cubierto.
Docs: http://getbootstrap.com/components/#navbar-fixed-bottom
Esto funcionó perfectamente para mí.
Agregue esta clase navbar-fixed-bottom a su pie de página.
<div class="footer navbar-fixed-bottom">
Lo usé así:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
Y se pone a fondo sobre el ancho completo.
Editar: Esto hará que el pie de página esté siempre visible, es algo que debe tener en cuenta.
La técnica más sencilla es probablemente usar Bootstrap navbar-static-bottom junto con la configuración del div contenedor principal con height: 100vh (nuevo porcentaje de puerto de vista CSS3). Esto tirará el pie de página al fondo.
<main class="container" style="height: 100vh;">
some content
</main>
<footer class="navbar navbar-default navbar-static-bottom">
<div class="container">
<p class="navbar-text navbar-left">© Footer4U</p>
</div>
</footer>
Mantenlo simple.
footer {
bottom: 0;
position: absolute;
}
Es posible que también deba desplazar la altura del pie de página agregando un margin-bottom equivalente a la altura del pie de página al body .
Necesitas envolver tu div .container-fluid para que tu pie de página pegajoso funcione, también te faltan algunas propiedades en tu clase .wrapper . Prueba esto:
Quite el padding-top:70px de su etiqueta del body e .container-fluid en su .container-fluid en su lugar, así:
.wrapper > .container-fluid {
padding-top: 70px;
}
Tenemos que hacer esto porque empujar el body hacia abajo para acomodar la barra de navegación termina empujando el pie de página un poco más (70px más) más allá de la ventana gráfica, de modo que obtenemos una barra de desplazamiento. En cambio, obtenemos mejores resultados al empujar la .container-fluid .
A continuación, tenemos que eliminar la clase .wrapper fuera de tu div .container-fluid y envolver con ella tu #main div, así:
<div class="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">...</div>
<div class="push"></div>
</div>
</div>
Su pie de página, por supuesto, debe estar fuera del div .wrapper así que retírelo de la div .wrapper y colóquelo afuera, así:
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
Después de hacer todo esto, empuje correctamente su pie de página más cerca de su clase .wrapper utilizando un margen negativo, como por ejemplo:
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
Y eso debería funcionar, aunque es probable que tenga que modificar algunas otras cosas para que funcione cuando se .wrapper el tamaño de la pantalla, como restablecer la altura en la clase .wrapper , así:
@media (max-width:480px) {
.wrapper {
height:auto;
}
}
Otra posible solución, solo usando consultas de medios.
@media screen and (min-width:1px) and (max-width:767px) {
.footer {
}
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:1120px){
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
Para Demo usamos dos DIV''s en el HTML para el efecto básico de pie de página pegajoso . Escribe así:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
Parece que la height:100% ''cadena'' se está rompiendo en div#main . Intenta agregarle height:100% y eso te puede acercar más a tu objetivo.
Probado con Bootstrap 3.6.6 .
HTML
<div class="container footer navbar-fixed-bottom">
<footer>
<!-- your footer content here -->
</footer>
</div>
CSS
.footer {
bottom: 0;
position: absolute;
}
Puedes usar jQuery para manejar esto:
$(function() {
/**
* Read the size of the window and reposition the footer at the bottom.
*/
var stickyFooter = function(){
var pageHeight = $(''html'').height();
var windowHeight = $(window).height();
var footerHeight = $(''footer'').outerHeight();
// A footer with ''fixed-bottom'' has the CSS attribute "position: absolute",
// and thus is outside of its container and counted in $(''html'').height().
var totalHeight = $(''footer'').hasClass(''fixed-bottom'') ?
pageHeight + footerHeight : pageHeight;
// If the window is larger than the content, fix the footer at the bottom.
if (windowHeight >= totalHeight) {
return $(''footer'').addClass(''fixed-bottom'');
} else {
// If the page content is larger than the window, the footer must move.
return $(''footer'').removeClass(''fixed-bottom'');
}
};
// Call when this script is first loaded.
window.onload = stickyFooter;
// Call again when the window is resized.
$(window).resize(function() {
stickyFooter();
});
});
Un ejemplo de trabajo para el arranque de Twitter NOT STICKY FOOTER
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $(''#footer'').height();
var footerTop = $(''#footer'').position().top + footerHeight;
if (footerTop < docHeight)
$(''#footer'').css(''margin-top'', 10+ (docHeight - footerTop) + ''px'');
});
</script>
Necesitas al menos un elemento con un #footer
Cuando no quiera la barra de desplazamiento, si el contenido se ajusta a la pantalla, solo cambie el valor de 10 a 0
La barra de desplazamiento se mostrará si el contenido no se ajusta a la pantalla.
Use el componente de la barra de navegación y agregue la clase .navbar-fixed-bottom:
<div class="navbar navbar-fixed-bottom"></div>
agregar cuerpo
{ padding-bottom: 70px; }
Use la siguiente clase para empujarlo a la última línea de la página y también para centrarla. Si está utilizando la página HAML de Ruby on Rails, puede utilizar el siguiente código. %footer.card.text-center
Por favor, no te olvides de usar twitter bootstrapp
para manejar los diseños de restricción de ancho, use lo siguiente para no tener esquinas redondeadas, y para que su barra de navegación quede al ras de los lados de la aplicación
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="width-constraint clearfix">
<p class="pull-left muted credit">YourApp v1.0.0</p>
<p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
</div>
</div>
</div>
luego puede usar css para anular las clases de arranque para ajustar la altura, la fuente y el color
.navbar-fixed-bottom {
font-size: 12px;
line-height: 18px;
}
.navbar-fixed-bottom .navbar-inner {
min-height: 22px;
}
.navbar-fixed-bottom .p {
margin: 2px 0 2px;
}
La respuesta de HenryW es buena, aunque necesitaba algunos ajustes para que funcionara como quería. En particular se maneja también lo siguiente:
- Evitar el "salto" en la carga de la página marcando primero invisible y configurando visible en javascript
- Tratar con el tamaño del navegador con gracia
- Además, configure el pie de página para hacer una copia de seguridad de la página si el navegador se vuelve más pequeño y el pie de página es más grande que la página
- Ajustes de la función de altura
Esto es lo que me funcionó con esos retoques:
HTML:
<div id="footer" class="invisible">My sweet footer</div>
CSS:
#footer {
padding-bottom: 30px;
}
JavaScript:
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $(''#footer'').outerHeight();
var footerTop = $(''#footer'').position().top + footerHeight;
if (footerTop < docHeight) {
$(''#footer'').css(''margin-top'', (docHeight - footerTop) + ''px'');
} else {
$(''#footer'').css(''margin-top'', '''');
}
$(''#footer'').removeClass(''invisible'');
}
$(document).ready(function() {
setFooterStyle();
window.onresize = setFooterStyle;
});
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}
La altura del pie de página coincide con el tamaño de la sangría inferior del elemento de ajuste.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}