attribute - title html css
Repare el pie de página en la parte inferior de la página (12)
Aunque la mayoría de las páginas de mi sitio tienen suficiente contenido para colocar el pie de página en la parte inferior de la página para la mayoría de las personas. Me gustaría saber que, de todos modos, siempre estará fijo en la parte inferior independientemente del tamaño de la pantalla a partir de ahora.
Lo intenté de varias maneras, como bottom: 0x; position:absolute: etc. Nunca parece funcionar muy bien, de vez en cuando empuja el pie de página fuera de su contenedor para fijarlo al fondo usando algunos de esos ejemplos allí mismo.
Se incluye el HTML y CSS para las dos partes del pie de página (pie de página y barra de derechos de autor). Ambos están dentro de una <section id="footer"> div todos modos.
Eliminé mis intentos de que se pegara para que la gente pueda echarle un vistazo ahora y ver qué es lo que el código actual debe enmendar.
URL en vivo - http://www.mangdevelopment.co.uk/nakedradish
(Es un sitio web de restaurante. No te preocupes por la palabra ''desnudo'').
HTML
<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png" />
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#">
<li>Classic Box</li>
</a>
<a href="#">
<li>Vegetarian Box</li>
</a>
<a href="#">
<li>Family Box</li>
</a>
<a href="#">
<li>Dinner Party Box</li>
</a>
<a href="#">
<li>Gift Box</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#">
<li>Last Weeks Feature</li>
</a>
<a href="#">
<li>Next Weeks Feature</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>ABOUT US</h6>
<ul>
<a href="#">
<li>The Food</li>
</a>
<a href="#">
<li>How We Sourcex</li>
</a>
<a href="#">
<li>Sustainability</li>
</a>
<li><a href="about.html">About Us</a></li>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div>
</div>
<div class="span5">
<div id="twitter">
<img src="img/twitter-logo.png" alt="" title="" height="50" width="50" class="twitter-logo" />
<div class="tweet-bg">
<div class="tweets">
<p>@chefallanp that''s just not on really</p>
</div>
<div id="follow-btn">
<img src="img/follow-us.jpg" />
</div>
</div>
</div>
<div class="checkout-options">
<h6>SECURE CHECKOUT</h6>
<ul>
<li><img src="img/solo-logo.png" /></li>
<li><img src="img/switch-logo.png" /></li>
<li><img src="img/maestro-logo.png" /></li>
<li><img src="img/visa-logo.png" /></li>
<a href="#">
<li><img src="img/facebook-logo.png" /></li>
</a>
<a href="#">
<li><img src="img/twitter-logo-flat.png" /></li>
</a>
</ul>
</div>
</div>
</div>
</div>
<div id="copyright-bar">
<div class="container">
<div class="row">
<div class="copyright-content">
<div class="span4">
<p>The Naked Radish Limited. 2013 All rights reserved.</p>
</div>
<div class="span4 offset4">
<div class="copyright-list">
<ul>
<a href="terms.html">
<li>Terms & Conditions</li>
</a>
<a href="privacy.html">
<li> - Privacy Policy</li>
</a>
<a href="#">
<li> - Cookie Policy</li>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
}
Al igual que esta position:fixed; agregar position:fixed; y bottom:0; debajo del selector #footer :
CSS
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
position:fixed;
bottom:0;
width:100%;
}
Aquí hay una solución simple de CSS que funcionará:
#fix-footer{
position: fixed;
left: 0px;
bottom: 0px;
height: 35px;
width: 100%;
background: #1abc9c;
}
Aquí hay una solución sin usar posición y funciona perfecto en todos los navegadores: manteniendo el pie de página en la parte inferior
CSS
html {
height:100%;
}
body {
min-height:100%; position:relative;
}
.footer {
background-color: rgb(200,200,200);
height: 115px;
position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }
HTML
<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>
El elemento del pie de página no se fijará inherentemente en la parte inferior de la ventana gráfica a menos que lo ajuste de esa manera.
Por lo tanto, si tienes una página que no tiene suficiente contenido para presionarla hacia abajo, terminará en algún lugar en el medio de la ventana gráfica; se veía muy incómodo y no estaba seguro de qué hacer consigo mismo, como mi primer día de escuela secundaria.
Posicionar el elemento declarando la regla fixed es excelente si siempre quiere que su pie de página esté visible independientemente del alto inicial de la página, pero luego recuerde establecer un margen inferior para que no se superponga al último bit de contenido en esa página. Esto se vuelve complicado si su pie de página tiene una altura dinámica; que a menudo es el caso con sitios receptivos ya que está en la naturaleza de elementos apilar.
Encontrará un problema similar con absolute posicionamiento absolute . Y a pesar de que saca el elemento en cuestión del flujo natural del documento, aún no lo arreglará en la parte inferior de la pantalla si se encuentra con una página que tiene poco o ningún contenido para desarrollarlo.
Considere lograr esto por:
- Declarar un valor de altura para las etiquetas
<body>&<html> - Declarar un valor de
minimum-heightpara el elemento contenedor encapsulado, generalmente el elemento que envuelve todos los elementos descendientes contenidos dentro de la estructura del cuerpo (esto no incluiría su elemento defooter)
$("#addBodyContent").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".flex-col:first-of-type");
});
$("#resetBodyContent").on("click", function() {
$(".flex-col p").remove();
});
$("#addFooterContent").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo("footer");
});
$("#resetFooterContent").on("click", function() {
$("footer p").remove();
});
html, body {
height: 91%;
}
.wrapper {
width: 100%;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px;
display: block;
min-height: 100%;
}
footer {
background: black;
text-align: center;
color: white;
box-sizing: border-box;
padding: 10px;
}
.flex {
display: flex;
height: 100%;
}
.flex-col {
flex: 1 1;
background: #ccc;
margin: 0px 10px;
box-sizing: border-box;
padding: 20px;
}
.flex-btn-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
}
.btn {
box-sizing: border-box;
padding: 10px;
transition: .7s;
margin: 10px 10px;
min-width: 200px;
}
.btn:hover {
background: transparent;
cursor: pointer;
}
.dark {
background: black;
color: white;
border: 3px solid black;
}
.light {
background: white;
border: 3px solid white;
}
.light:hover {
color: white;
}
.dark:hover {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flex-btn-wrapper">
<button id="addBodyContent" class="dark btn">Add Content</button>
<button id="resetBodyContent" class="dark btn">Reset Content</button>
</div>
<div class="flex">
<div class="flex-col">
lorem ipsum dolor...
</div>
<div class="flex-col">
lorem ipsum dolor...
</div>
</div>
</div>
<footer>
<div class="flex-btn-wrapper">
<button id="addFooterContent" class="light btn">Add Content</button>
<button id="resetFooterContent" class="light btn">Reset Content</button>
</div>
lorem ipsum dolor...
</footer>
El pie de página se coloca en la parte inferior de la página, pero no se fija .
CSS
html {
height: 100%;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding: 0;
}
#header {
background: #595959;
height: 90px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
background-color: #595959;
}
HTML
<html>
<head></head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
La solución de pie de página adhesivo me resulta un poco dolorosa en los sitios con capacidad de respuesta, dado que la altura de su navegador y pie de página puede variar según el dispositivo. Si solo te importa trabajar en navegadores modernos, puedes lograr tu objetivo usando un poco de Javascript.
Si este es tu HTML:
<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>
Luego usa este JQuery en cada página:
$(function(){
/* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
function setWrapperMinHeight() {
$(''.wrapper'').css(''minHeight'', window.innerHeight - $(''.nav'').height() - $(''.footer'').height());
}
/* Make sure the main div gets resized on ready */
setWrapperMinHeight();
/* Make sure the wrapper div gets resized whenever the screen gets resized */
window.onresize = function() {
setWrapperMinHeight();
}
});
Para tu footer :
#footer {
position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
}
Para tu body :
body {
margin-bottom:50px;
}
#footer {
background-color: red;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 50px;
margin-bottom: 0px;
}
div {
margin: 20px 20px;
}
body {
margin-bottom: 50px;
}
<div>
Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it''s always fixed to the bottom regardless of screen size from now on anyway. I''ve tried a number of ways such as bottom:
0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it''s container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright
bar). They''re both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the
bottom of the page for most people. I would like to know it''s always fixed to the bottom regardless of screen size from now on anyway. I''ve tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally
pushes the footer out of it''s container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They''re both inside of a div anyway. I removed my attempts
at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it''s always
fixed to the bottom regardless of screen size from now on anyway. I''ve tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it''s container to fix to the bottom using
some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They''re both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and
see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it''s always fixed to the bottom regardless of screen size from now on anyway.
I''ve tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it''s container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for
the two parts of the footer (footer & copyright bar). They''re both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site
have enough content to push the footer to the bottom of the page for most people. I would like to know it''s always fixed to the bottom regardless of screen size from now on anyway. I''ve tried a number of ways such as bottom: 0x; position:absolute: etc.
Never seems to work very well, occasionally pushes the footer out of it''s container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They''re both inside
of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most
people. I would like to know it''s always fixed to the bottom regardless of screen size from now on anyway. I''ve tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it''s
container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They''re both inside of a div anyway. I removed my attempts at getting it to stick so people
can have a look at it right now and see what the current code is to amend.
</div>
<div id="footer">
This is footer
</div>
Podemos usar FlexBox para Sticky Footer y Encabezado sin usar POSICIONES en CSS.
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 50px;
flex-shrink: 0;
background-color: #037cf5;
}
footer {
height: 50px;
flex-shrink: 0;
background-color: #134c7d;
}
main {
flex: 1 0 auto;
}
<div class="container">
<header>HEADER</header>
<main class="content">
</main>
<footer>FOOTER</footer>
</div>
DEMO - JSFiddle
Nota : Verifique los soportes del navegador para FlexBox. caniuse
Pregunta duplicada (o nplicada para ser correcta), sin embargo lea esto http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page keeping-footers-at-the-bottom-of-the-page
Un ejemplo muy simple que muestra cómo arreglar el pie de página en la parte inferior del diseño de la aplicación.
/* Styles go here */
html{ height: 100%;}
body{ min-height: 100%; background: #fff;}
.page-layout{ border: none; width: 100%; height: 100vh; }
.page-layout td{ vertical-align: top; }
.page-layout .header{ background: #aaa; }
.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }
.page-layout .main-content .container{ text-align: center; padding-top: 50px; }
.page-layout .footer{ background: #333; color: #fff; }
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="page-layout">
<tr>
<td class="header">
<div>
This is the site header.
</div>
</td>
</tr>
<tr>
<td class="main-content">
<div>
<h1>Fix footer always to the bottom</h1>
<div>
This is how you can simply fix the footer to the bottom.
</div>
<div>
The footer will always stick to the bottom until the main-content doesn''t grow till footer.
</div>
<div>
Even if the content grows, the footer will start to move down naturally as like the normal behavior of page.
</div>
</div>
</td>
</tr>
<tr>
<td class="footer">
<div>
This is the site footer.
</div>
</td>
</tr>
</table>
</body>
</html>
conjunto
html, body { height: 100%; }
envuelva todo el contenido antes del pie de página en un div.
.wrapper { height:auto !important; min-height:100%; }
Puede ajustar la altura mínima a su gusto en función de la cantidad de pie de página que desea mostrar en la parte inferior de la ventana del navegador. Si lo configura en 90%, se mostrará el 10% del pie de página antes de desplazarse.