html - attribute - tooltip bootstrap 4 example
Twitter Bootstrap 3 Pie de página pegajoso (25)
¡Solo usa flex! Asegúrese de usar body y main en su HTML y es una de las mejores soluciones (a menos que necesite el soporte de IE9). No requiere una altura fija o similar.
Eso es recomendado para materializar también!
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
¡He estado usando el marco de arranque de Twitter durante bastante tiempo y se han actualizado recientemente a la versión 3!
Estoy teniendo problemas para que el pie de página se pegue al fondo, he usado la plantilla de inicio proporcionada por el sitio web de arranque de Twitter, pero todavía no tengo suerte, ¿alguna idea?
Además de la CSS que acaba de agregar, recuerde que debe agregar la división push antes de cerrarla.
La estructura básica para el HTML es
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end footer -->
Aquí está el getbootstrap.com/examples/sticky-footer-navbar partir de hoy porque siempre lo están optimizando y esto es BUENO:
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Aquí está mi solución actualizada a este problema.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #eee;
text-align: center;
}
.site-footer-links {
font-size: 12px;
line-height: 1.5;
color: #777;
padding-top: 20px;
display: block;
text-align: center;
float: center;
margin: 0;
list-style: none;
}
Y úsalo así:
<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>© Zee and Company<span></span></li>
</ul>
</div>
</div>
O
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
Aquí hay un método que agregará un pie de página adhesivo que no requiere ningún CSS o Javascript adicional que no sea lo que ya está en Bootstrap y no interferirá con su pie de página actual.
Ejemplo aquí: Easy Sticky Footer
Simplemente copia y pega esto directamente en tu código. Sin alboroto no muss
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>
Aquí hay un pie de página adhesivo muy simple y limpio que puedes usar en bootstrap. ¡Totalmente responsivo!
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}
Ejemplo: CodePen Demo
Aquí hay una solución basada en CSS para un pie de página adhesivo de altura variable y totalmente sensible.
Ventaja: el pie de página permite una altura variable, ya que la altura ya no necesita estar codificada en CSS.
body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > * {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* Reset CSS and some footer styling. Only needed on */
body {
padding: 50px 0 0;
margin: 0;
}
footer {
background-color: #f8f8f8;
padding: 15px 0 5px;
border-top: 1px solid #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Responsive sticky footer of any height</h1>
</div>
<p class="lead">You can have a sticky footer of any height using this CSS. It''s also fully responsive, no JavaScript needed.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
<p class="text-muted">And some more content.</p>
<p class="text-muted">And more...</p>
</div>
</footer>
Y aquí está el SCSS sin prefijo (para gulp / grunt ):
body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
Basándome en la respuesta de Jek-fdrv , agregué un .on(''resize'', function() para asegurarme de que funciona en todos los dispositivos y en cada resolución:
$(window).on(''resize'', function() {
if ($(document).height() <= $(window).height()) {
$(''footer'').addClass("navbar-fixed-bottom");
} else {
$(''footer'').removeClass("navbar-fixed-bottom");
}
});
El div push debe ir justo después de la wrap , NO dentro de ... así como así
<div id="wrap">
*content goes here*
</div>
<div id="push">
</div>
<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
El ejemplo pegajoso no funciona para mí. Mi solución:
#footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}
En palabras de Haml & Sass todo lo necesario:
Haml para app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
Sass para app/assets/stylesheets/application.css.sass
$footer-height: 110px
html
position: relative
min-height: 100%
body
margin-bottom: $footer-height
body > footer
position: absolute
bottom: 0
width: 100%
height: $footer-height
Escribo mi código de pie de página adhesivo simplificado con relleno usando MENOS. Esta respuesta es probablemente fuera de tema porque la pregunta no habla sobre el relleno, por lo que si está interesado, consulte esta publicación para obtener más detalles.
@footer-padding: 40px; // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: @footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
padding: @footer-padding 0;
}
Esto ha sido resuelto por flexbox, una vez y para siempre:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
El HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
El CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Js simple
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
La versión actual de bootstrap ya no parece funcionar para esta función. Si descarga su ejemplo de barra de navegación de pie de página adhesivo y coloca una gran cantidad de contenido en el área del cuerpo principal, el pie de página será empujado hacia abajo más allá de la parte inferior de la ventana gráfica. No es pegajoso en absoluto.
Me demoré un poco en el tema, pero encontré esta publicación, ya que acabo de ser mordido por esa pregunta y finalmente encontré una manera realmente fácil de navbar , simplemente use una navbar con la navbar-fixed-bottom habilitada. . Por ejemplo:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
HTH
Para resumir todo esto, solo tenga en cuenta que todo, excepto el pie de página, debe tener min-height: 100% o poco menos.
Quería un pie de página adhesivo flexible , por lo que vine aquí. Las mejores respuestas me llevaron en la dirección correcta.
El actual (2 de octubre 16) Bootstrap 3 css Pie de página adhesivo (tamaño fijo) se ve así:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Mientras el pie de página tenga un tamaño fijo, la parte inferior del margen del cuerpo crea un empuje para permitir que se asiente un bolsillo en el pie de página. En este caso, ambos están configurados a 60px. Pero si el pie de página no es fijo y supera los 60px de altura, cubrirá el contenido de su página.
Hacer flexible: elimine el margen del cuerpo del css y la altura del pie de página. A continuación, agregue JavaScript para obtener la altura del pie de página y establecer el margen inferior del cuerpo. Eso se hace con la función setfooter (). A continuación, agregue escuchas de eventos para cuando la página se cargue por primera vez y al cambiar el tamaño que ejecuta setfooter. Nota: si el pie de página tiene un acordeón o cualquier otra cosa que active un cambio de tamaño, sin cambiar el tamaño de la ventana, debe volver a activar la función setfooter ().
Ejecutar el fragmento y luego pantalla completa para demostrarlo.
function setfooter(){
var ht = document.getElementById("footer").scrollHeight;
document.body.style.marginBottom = ht + "px";
}
window.addEventListener(''resize'', function(){
setfooter();
}, true);
window.addEventListener(''load'', function(){
setfooter();
}, true);
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* additional style for effect only */
text-align: center;
background-color: #333;
color: #fff;
}
body{
/* additional style for effect only not needed in bootstrap*/
padding:0;
margin: 0;
}
<div>
Page content
<br> <br>
line 3
<br> <br>
line 5
<br> <br>
line 7
</div>
<footer id="footer" class="footer">
<div class="container">
<p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
</div>
</footer>
Refiriéndose al ejemplo oficial de pie de página adhesivo de Boostrap3, no es necesario agregar <div id="push"></div> , y el CSS es más simple.
El CSS utilizado en el ejemplo oficial es:
/* 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;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
y el HTML esencial:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
Puede encontrar el enlace para este css en el código fuente del ejemplo de pie de página adhesivo .
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
URL completa: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Respondido por el OP:
Añade esto a tu archivo CSS.
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 -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Si desea utilizar bootstrap compilación en clases para el pie de página. También deberías escribir algún javascript:
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$(''body > .container-fluid'').css(''padding-bottom'', $(''body > footer'').height());
};
});
Evitará la superposición de contenido por el pie de página fijo, y ajustará la padding-bottom del padding-bottom cuando el usuario cambie el tamaño de la ventana / pantalla.
En la secuencia de comandos anterior, asumí que el pie de página se coloca directamente dentro de la etiqueta del cuerpo así:
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
Definitivamente, esta no es la mejor solución (debido a la JS que podría evitarse), pero funciona sin problemas de superposición, es fácil de implementar y responde (la height no está codificada en CSS).
Simplemente puede intentar agregar una clase en la barra de navegación de su pie de página:
navbar-fixed-bottom
Luego crea un CSS denominado custom.css y un cuerpo de relleno como este ...
body { padding-bottom: 70px; }
Usar flexbox es la forma más fácil que he encontrado, de los tipos de CSS-tricks . Esto es cierto pie de página, funciona cuando el contenido es <100% de la página y> 100% de la página:
<body>
<div class="content">
content
</div>
<footer></footer>
</body>
Y CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
Tenga en cuenta que esto es bootstrap-agnostic, por lo que funciona con bootstrap y sin él.
simplemente agregue la clase navbar-fixed-bottom a su pie de página.
<div class="footer navbar-fixed-bottom">
#myfooter{
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}
<footer>
<div class="footer">
<div class="container-fluid" id="myfooter">
<div class="row">
<div class="col-md-12">
<p class="copy">Copyright © Your words</p>
</div>
</div>
</div>
</div>
</footer>