HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Footer | Code 30 Things in 30 Days with CSS3</title>
<!-- NORMALIZE CSS -->
<link rel="stylesheet" href="../_theme-styles/normalize.css">
<!-- PROJECT THEME CSS -->
<link rel="stylesheet" href="../_theme-styles/theme.css">
<!-- FINAL PROJECT CSS (use for reference) -->
<link rel="stylesheet" href="final.css">
<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed" rel="stylesheet">
</head>
<body class="sticky-footer-lesson">
<div class="page-content">
<h1><small>Day #13</small> Sticky Footer <small>Final Version</small></h1>
<div class="sandbox">
<h2>Sandbox <small>This is where you play</small></h2>
<div class="content">
<a href="student.html" class="button-theme"><small>Click here to</small>View the student version</a><br>
<a href="index.html" class="button-theme"><small>Click here to</small>View the info page</a>
</div>
</div>
</div>
<footer>
<div>This is a sticky footer! Resize the height of the browser, watch what happens!</div>
</footer>
</body>
</html>
CSS:
html, body {height:100%;margin:0;}.page-content {min-height:100%;margin-bottom:-120px;/* same measurement as footer */}.page-content::after {content:"";display:block;}footer, .page-content::after {height:120px;}
No comments:
Post a Comment