I'm making a web page and I don't really know much about css or html. How do I keep the footer always at the bottom of the page? I have a space between the footer and the bottom of the page. I appreciate your help.
/*-----------General-----------*/
#pagina {
width: 100%;
margin: 0 auto;
position: relative;
}
/* -----fuente y color del menu ----- */
.menu {
color: #b40404;
font-weight: normal;
font-family: 'Roboto', sans-serif;
font-size: 17px;
line-height: 16px;
}
/* ----- Color del link (titulo) del menu ----- */
.menu a {
color: #b40404;
}
/* ----- Color del título del menú al pasar el ratón por encima----- */
.menu a:hover {
color: #354f83;
}
/* ----------color, fuente tamaño del texto body------------*/
body {
color: #5e5e5e;
font-weight: normal;
font-family: 'Arial', sans-serif;
font-size: 13px;
line-height: 18px;
text-align: left;
/*------------reemplazar imagen cuando este en el servidor----------------*/
background: #e5e2db url("http://dynamic.websimages.com/s/themes/savvy/v1.72/images/simple/bg.png") repeat fixed center 0;
z-index: 1;
}
/* ---------------------------------- Color de los link en body ------------------------------------------*/
body a {
color: #3f5b87;
}
/* -------------------------- Color de los link al pasar el ratón en body ----------------------------------*/
body a:hover {
color: #000000;
}
/* ------------------------------------------ general ----------------------------------------------- */
a {
text-decoration: underline;
outline: none;
}
a:hover {
text-decoration: none;
}
p {
padding: 0 0 20px;
}
.interno {
width: 950px;
margin: 0 auto;
background: #ffffff none repeat fixed center 0;
-moz-box-shadow: 0 0 5px #555555;
-webkit-box-shadow: 0 0 5px #555555;
box-shadow: 0 0 5px #555555;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: relative;
top: 8px;
height: auto;
}
.externo {
width: 966px;
margin: 0 auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #c5beaf;
background: rgba(154, 143, 115, 0.15);
}
/* ---------------------------------- Header ----------------------------------------------*/
header.header {
width: 100%;
/*height: 130px;*/
position: relative;
}
/*.header-area {
width: 950px;
height: 130px;
margin: 0 auto;
z-index: 1;
overflow: visible;
}
.w-header-area {
min-height: 130px;
}*/
/* ---------------------------------- Nav y menu ------------------------------------------*/
.cabecera-menu {
height: 90px;
position: relative;
margin: 0 auto 10px;
width: 966px;
}
.cabecera-menu {
width: 966px;
}
.interno-cabecera-menu {
width: 920px;
height: 74px;
position: relative;
margin: 0 auto;
top: 8px;
padding: 0 15px;
}
#caja-nav>ul {
list-style: none;
position: relative;
top: 0;
z-index: 20;
}
#caja-nav>ul>li {
float: left;
padding: 15px 15px;
margin-top: 14px;
position: relative;
/* -- Este es el espacio entre dos items del menu -- */
margin-left: -5px;
}
#caja-nav>ul>li>a {
display: block;
text-decoration: none;
}
#caja-nav>ul>li.active,
#caja-nav>ul>li.child-active {
color: #FFFFFF;
display: block;
outline: medium none;
border: 1px solid #161616;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #4d71b7;
background-image: -moz-linear-gradient(top, #4d71b7, #354f83);
background-image: -o-linear-gradient(top, #4d71b7, #354f83);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4d71b7), color-stop(1, #354f83));
background-image: -webkit-linear-gradient(#4d71b7, #354f83);
background-image: linear-gradient(top, #4d71b7, #354f83);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d71b7', endColorStr='#354f83');
}
#caja-nav>ul>li.active>a,
#caja-nav>ul>li.child-active>a {
color: #ffffff;
}
/* ---------------------------------- Main ----------------------------------------------*/
.contenedor {
min-height: 460px;
position: relative;
width: 966px;
margin: 0 auto 10px;
clear: both;
}
.contenido-ancho {
width: 966px;
min-height: 460px;
}
.contenido-ancho-interno {
min-height: 404px;
padding: 20px 15px;
width: 920px;
}
/* ---------------------------------- Footer ----------------------------------------------*/
footer {
min-height: 70px;
background-color: #191919;
background-image: -moz-linear-gradient(top, #191919, #000000);
background-image: -o-linear-gradient(top, #191919, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #191919), color-stop(1, #000000));
background-image: -webkit-linear-gradient(#191919, #000000);
background-image: linear-gradient(top, #191919, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#191919', endColorStr='#000000');
border-top: 1px solid rgba(50, 50, 50, 0.3);
width: 100%;
position: relative;
clear: both;
margin-top: 0px;
padding-top: 0px;
overflow: visible;
}
.footer {
border-top: 1px solid #222;
}
.post-footer {
width: 950px;
margin: 0 auto;
}
<div id="pagina">
<header class="header">
<div class="header-area">
<section>
<!-- <h2>Titilo de contenido</h2>
<p class="sub-header"> Contenido </p> -->
</section>
</div>
</header>
<div class="externo cabecera-menu">
<div class="interno interno-cabecera-menu">
<nav id="caja-nav">
<ul class="menu">
<li class="active"><a href="home.html" title="Home"><span class="title">Home</span><span class="after"></span></a></li>
<li><a href="ofertas.html" title="Ofertas"><span class="title">Ofertas</span><span class="after"></span></a></li>
<li><a href="fonendos.html" title="Fonendos"><span class="title">Fonendos</span><span class="after"></span></a></li>
<li><a href="oximetros.html" title="Oximetros"><span class="title">Oximetros</span><span class="after"></span></a></li>
<li><a href="articulos-y-accesorios.html" title="Articulos y Accesorios"><span class="title">Articulos y Accesorios</span><span class="after"></span></a></li>
<li><a href="repuestos.html" title="Repuestos"><span class="title">Repuestos</span><span class="after"></span></a></li>
<li><a href="hacer-pedido.html" title="Hacer Pedido"><span class="title">Hacer Pedido</span><span class="after"></span></a></li>
<li><a href="faq.html" title="Faq"><span class="title">Faq</span><span class="after"></span></a></li>
</ul>
</nav>
</div>
</div>
<div class="contenedor">
<div class="contenido-ancho externo">
<div class="contenido-ancho-interno interno">
<article>
<h1>Mi sitio web</h1>
<p>Mi sitio web creado en html5</p>
<a href="www.google.com">google 1</a>
<a href="www.google.com">google 2</a>
</article>
</div>
</div>
</div>
<!-- <section>
<article>
<br>
<h2>Titulo del articulo</h2>
<p>Aqui va el artículo</p>
<img src="images/logo.png">
</article>
</section>
<aside>
<h2>ASIDE</h2>
<p>Puede haber mas de uno y se les da formato diferente asignándoles ID o CLASS con CSS</p>
</aside>-->
</div>
<footer class="footer">
<div class="post-footer">
¿Cómo hago para mantener el footer pegado abajo siempre?
</div>
</footer>
If you want the
footer
ALWAYS to stay at the bottom of the screen then the simplest thing (and what I haven't seen in any of the answers you've been given so far) is to change its propertyposition
to be fixed and tell it to always display at the bottom of the screen (with the propertybottom: 0
).You will also be able to observe that on both the left and right sides of the web page
footer
it does not touch the sides. This is because the labelbody
has a default margin. If we set it to 0 you will no longer see these gaps on both sides.You would have to modify the following:
Your corrected example:
Try to put in the css in footer this
Try adding the top property in the footer styles and putting position:absolute , leave it as you want:
Try adding this property to the footer, it works for me
Add min-height: 100vh and position: relative to your container in CSS.
this is the css
and this is the HTML