html - pagina - Bootstrap 3 Descargue el pie de página hacia abajo. no arreglado
pie de pagina bootstrap 4 (12)
Estoy usando Bootstrap 3 para un sitio que estoy diseñando.
Quiero tener un pie de página como esta muestra. Sample
Tenga en cuenta que no lo quiero FIJADO para que bootstrap navbar-fixed-bottom no resuelva mi problema. Solo quiero que esté siempre en la parte inferior del contenido y también sea receptivo.
Cualquier guía será muy apreciada.
EDITAR:
Lo siento si no estaba claro. Lo que sucede ahora es que cuando el cuerpo de contenido no tiene suficiente contenido. Mi pie de página se mueve hacia arriba y luego deja un espacio vacío en la parte inferior.
Esto es lo que tengo ahora para mi barra de navegación
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5 id=''footer-header''> SITEMAP </h3>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>News</p>
<p>contact</p>
</div>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>FAQ</p>
<p>Privacy Policy</p>
</div>
</div>
<div class="col-sm-4">
<h5 id=''footer-header''> xxxx </h3>
<p>yyyyyyyyyyyyy</p>
</div>
<div class="col-sm-4">
<h5 id=''footer-header''> xxxxx </h3>
<p>uuuuuuuuuuuuuuu</p>
</div>
</div>
</div>
</nav>
CSS
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
ACTUALIZACIÓN: Esto no responde directamente a la pregunta en su totalidad, pero a otros les puede resultar útil.
Este es el HTML para su pie de página receptivo
<footer class="footer navbar-fixed-bottom">
<div class="container">
</div>
</footer>
Para el CSS
footer{
width:100%;
min-height:100px;
background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}
NOTA: En el momento de la publicación de esta pregunta, las líneas de código anteriores no empujan el pie de página por debajo del contenido de la página; pero evitará que su pie de página se arrastre a la mitad de la página cuando hay poco contenido en la página. Para un ejemplo que empuja el pie de página debajo del contenido de la página, mire aquí http://getbootstrap.com/examples/sticky-footer/
Aquí hay una solución simplificada de bootstrap (donde no es necesario crear una nueva clase): http://getbootstrap.com/examples/sticky-footer-navbar/
Cuando abra esa página, haga clic derecho en un navegador y "Ver origen" y abra el archivo sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css )
puedes ver que solo necesitas este 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;
}
para este HTML
<html>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>
El principal defecto de las soluciones anteriores es que tienen una altura fija para el pie de página.
Y eso no es suficiente en el mundo real, donde la gente usa un trillón de dispositivos y tiene la mala costumbre de rotarlos cuando menos lo esperas y ** ¡Poof! ** ¡Ahí va el contenido de su página detrás del pie de página!
En el mundo real, necesita una función que calcule la altura del pie de página y ajuste dinámicamente el padding-bottom de padding-bottom del contenido de la página para adaptarse a esa altura. Y necesita ejecutar esta pequeña función en la load página y resize eventos, así como en el DOMSubtreeModified del pie de DOMSubtreeModified (en caso de que su pie de página se actualice dinámicamente de forma asincrónica o contenga elementos animados que cambian de tamaño al interactuar).
Aquí hay una prueba de concepto, usando jQuery v3.0.0 y Bootstrap v4-alpha , pero no hay ninguna razón por la cual no debería funcionar en las versiones más bajas de cada uno.
jQuery(document).ready(function( $ ) {
$.fn.accomodateFooter = function(){
var footerHeight = $(''footer'').outerHeight();
$(this).css({''padding-bottom'':footerHeight+''px''});
}
// accomodate footer after its html has changed
$(''footer'').on(''DOMSubtreeModified'', function(){
$(''body'').accomodateFooter();
})
// accomodate footer on page load and resize
$(window).on(''load resize'', function(){
$(''body'').accomodateFooter();
})
$(''body'').accomodateFooter();
window.addMoreContentToFooter = function() {
var f = $(''footer'');
f.append($(''<p />'',{
text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human''s bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
.append($(''<hr />''));
}
});
body {
min-height: 100vh;
position: relative;
padding-top: 54px;
}
footer {
background-color: rgba(0,0,0,.65);
color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
display: block;
}
footer hr {
border-top: 1px solid rgba(0,0,0,.42);
border-bottom: 1px solid rgba(255,255,255,.21);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Feed that footer - not a game (yet!)</h1>
<p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn''t work with lower versions of each.</blockquote>
</div>
</div>
<footer>I am a footer with dynamic content.
<hr />
Inicialmente, publiqué esta solución here pero me di cuenta de que podría ayudar a más personas si se publica en esta pregunta.
Nota: he envuelto a propósito el $([selector]).accomodateFooter() como un plugin jQuery, por lo que podría ejecutarse en cualquier elemento DOM, ya que en la mayoría de los diseños no es $(''body'') ''s bottom-padding que necesita ajustarse, pero algún elemento de envoltura de página con position:relative (por lo general, el elemento primario inmediato del footer de footer ).
Este método usa marcas mínimas. Simplemente coloque todo su contenido en una .wrapper que tenga un fondo acolchado y un margen inferior negativo igual a la altura del pie de página (en mi ejemplo 100px).
html, body {
height: 100%;
}
/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */
.wrapper {
min-height: 100%;
height: auto;
margin: 0 auto -100px;
padding-bottom: 100px;
}
.footer {
height: 100px;
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
Galen Gidman ha publicado una muy buena solución al problema de un pie de página adhesivo sensible que no tiene una altura fija. Puede encontrar su solución completa en su blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
HTML
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
CSS
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded { height: 100%; }
Ninguna de estas soluciones funcionó exactamente para mí porque usé la clase navbar-inverse en mi pie de página. Pero obtuve una solución que funcionaba y no tenía Javascript. Usó Chrome para ayudar a formar consultas de medios. La altura del pie de página cambia a medida que la pantalla cambia de tamaño, por lo que debe prestar atención a eso y ajustar en consecuencia. El contenido de su pie de página (establezco id = "pie de página" para definir mi contenido) debe usar postion = absolute y bottom = 0 para mantenerlo en la parte inferior. Ancho también: 100%. Aquí está mi CSS con consultas de medios. Tendrás que ajustar min-width y max-width y agregar o eliminar algunos elementos:
#footer {
position: absolute;
color: #ffffff;
width: 100%;
bottom: 0;
}
@media only screen and (min-width:1px) and (max-width: 407px) {
body {
margin-bottom: 275px;
}
#footer {
height: 270px;
}
}
@media only screen and (min-width:408px) and (max-width: 768px) {
body {
margin-bottom: 245px;
}
#footer {
height: 240px;
}
}
@media only screen and (min-width:769px) {
body {
margin-bottom: 125px;
}
#footer {
height: 120px;
}
}
O esto
<footer class="navbar navbar-default navbar-fixed-bottom">
<p class="text-muted" align="center">This is a footer</p>
</footer>
Para Bootstrap:
<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
Text
</div>
</div>
</div>
Para las personas que aún luchan y la solución respondida no funciona como usted lo desea, esta es la solución más simple que he encontrado.
Envuelva su contenido principal y asígnele una altura de vista mínima. Ajuste el 60 al valor que su estilo necesite.
<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>
Eso es y funciona bastante bien.
Vea el ejemplo a continuación. Esto posicionará su Pie de página para que se adhiera al fondo si la página tiene menos contenido y se comporta como un pie de página normal si la página tiene más contenido.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer''s height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
HTML
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
ACTUALIZACIÓN : la nueva versión de Bootstrap demuestra cómo agregar un pie de página adhesivo sin agregar un envoltorio. Por favor, consulte la respuesta de Jboy Flaga para más detalles.
usa flexbox ya que puedes usarlo a tu disposición. La solución ofrecida por bootstrap 4 sigue buscando contenido superpuesto en el diseño receptivo, por ejemplo: se romperá en la vista móvil, encuentro el truco más ingenioso es usar la demo de la solución flexbox que se muestra aquí :( https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ ) de esta manera no tenemos que lidiar con el problema de la altura fija, que es una solución obsoleta por el momento ... esta solución funciona para el arranque 3 y 4, cualquiera que sea el que use.
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
<footer class="row">
<div class="panel-footer text-center">
<p>add text</p>
</div>
</footer>