Skip to content

Instantly share code, notes, and snippets.

@BCasal

BCasal/Footer Anclado (fixed).markdown

Last active August 30, 2015 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BCasal/12fb22e22d37b68126aa to your computer and use it in GitHub Desktop.
Save BCasal/12fb22e22d37b68126aa to your computer and use it in GitHub Desktop.
Download ZIP
Footer Anclado (fixed)
Raw
index.html
<body>
<section>
<header>
<h1>Footer Anclado</h1>
<p>CSS · Position · Fixed</p>
</header>
</section>
<footer>
<p>Diseñado por · <a href="http://bcasal.es">BCasal</a></p>
</footer>
</body>
Raw
style.css
/*************************
INICIO BASE
*************************/
html, body, section, header, h1, h1 + p, footer, footer p { margin: 0; }
header, section, footer { width: 100%; }
h1, h1 + p { width: 95%; margin: 0 auto;}
a {
color: green;
text-decoration: none;
}
a:hover { border-bottom: solid 1px; }
/*************************
FIN BASE
*************************/
/*************************
INICIO PLANTILLA
*************************/
html, body {
color: aliceblue;
font-size: 1em;
text-align: center;
line-height: 1.4;
height: 100%;
background: silver;
}
section {
height: 92%;
position: absolute;
top: 0;
}
header {
position: relative;
top: 20%;
}
footer {
height: 8%;
position: fixed;
bottom: 0;
background: lime;
}
h1 { font-size: 3em; }
/*************************
FIN PLANTILLA
*************************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment