Tengo creado un footer y lo he logrado posicionar al fondo de la página y que cuando haga scroll siga allí,pero cuando escribo un div
, class
o id
se despega del final de la página.
Lo que quiero es que se quede allí. ¿Cómo lo hago?
Éste es mi código HTML y CSS:
html,
body {
background-color: #FfFFFF;
color: black;
margin: 0px;
padding: 0px;
height: 100%;
}
#contenidoprincipal {
min-height: 100%;
position: relative;
}
header {
background-color: blue;
margin: 0px;
padding: 0px;
width: 100%;
height: 120px;
}
header h1 {
color: Blue;
margin: 0px;
padding: 20px;
color: white;
font-family: sans serif, Arial;
font-size: 36px;
text-align: center;
}
.h2-section {
text-align: center;
}
nav {
font-family: Franklin Gothic Heavy, Arial;
font-size: 22px;
padding: 6px;
}
h2 {
font-family: arial black, agency fb, calibri, Arial;
}
article {
font-family: Arial, agency fb, calibri;
font-size: 10px;
}
#barra_lateral {
background-color: #8CEE51;
margin: 1%;
width: 20%;
height: 200px;
float: left;
position: relative;
}
#nav_lateral {
width: 80px;
margin: auto;
text-align: center;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
height: 10px;
line-height: 10px;
font-family: tahoma;
font-size: 12px;
}
.contenidodeinteres {
background-color: #80FF00;
float: right;
width: 74%;
height: auto;
padding: 1%;
margin-left: 0.5%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%
}
footer {
font-size: 15px;
color: white;
background-color: #373153;
text-align: center;
position: absolute;
width: 100%;
bottom: 0;
}
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>1ra Pagina Web</title>
<link href="Css-NetPage.css" rel="stylesheet" />
</head>
<body>
<div id="contenidoprincipal">
<header>
<h1>Titulo Principal </h1>
<nav>Barra de Navegacion</nav>
</header>
<aside i-d="barra_lateral">
<nav id="nav_lateral">Barra Lateral</nav>
</aside>
<section cl-ass=contenidodeinteres>
<h2 cl-ass=h2-section>Pagina Web</h2>
<article i-d="art.1">
<h4>Definicion:</h4>
<p>Una <strong>página web</strong>, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada
<strong>World Wide Web (WWW)</strong> y que puede ser accedida mediante un navegador web.<br> Esta información se encuentra generalmente en formato <strong>HTML o XHTML</strong>, y puede proporcionar acceso a otras páginas web mediante enlaces
de hipertexto.</p>
<p>Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.</p>
</article>
<article i-d="art.2">
<h4>Caracteristicas</h4>
<p>Una página web está compuesta principalmente por información de un tema factible (sólo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo, datos de estilo para especificar cómo debe visualizarse,
y también aplicaciones embebidas para así permitir interacción.</p>
<p>Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML.</p>
<p>Respecto a la estructura de las páginas web, algunos organismos, en especial el World Wide Web Consortium (W3C), suelen establecer directivas con la intención de normalizar el diseño, y para así facilitar y simplificar la visualización e interpretación
del contenido.</p>
<p>Una página web es en esencia una tarjeta de presentación digital, ya sea para empresas, organizaciones, o personas, así como una manera de comunicar ideas, pensamientos, conocimientos, informaciones o teorías. Así mismo, la nueva tendencia orienta
a que las páginas web no sean sólo atractivas para los internautas, sino también optimizadas (preparadas), para los buscadores a través del código fuente. Forzar esta doble función puede, sin embargo, crear conflictos respecto de la calidad
del contenido.</p>
</article>
</section>
<footer>
Contacto
</footer>
</div>
</body>
</html>