css 粘滞的页眉/页脚

Posted 2021-05-13

<header>
  <nav class="global-nav">
    <ul>
      <li><a href="https://codepen.io/MelissaMMDP/pen/rVOGOQ" target="_blank">Grid</a></li>
      <li><a href="https://codepen.io/MelissaMMDP/pen/MwaEyB" target="_blank">Color</a></li>
    </ul>
  </nav>
</header>

<main class="main-intro">
  <h1>Sticky Footer <span class="animated bounceInDown">Magic</span></h1>
  <p>Please enjoy this simple CSS sticky footer <span class="icon-heart">&#10084;</span></p>
  <p class="muggle"><a href="https://codepen.io/MelissaMMDP/pen/LMbVQp" target="_blank">muggle sticky footer</a></p>
</main>

<footer>
  <p>
    <small>&copy; 2015 Melissa Canada</small>
  </p>
</footer>

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v16/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v16/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v13/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMQg.ttf) format('truetype');
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
  min-height: 100%;
  position: relative;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}
body {
  background: #ffffff;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 5em;
  text-align: center;
}
main {
  margin: 0 auto;
  width: 100%;
  padding: 2.5em 0;
}
main:before,
main:after {
  content: "";
  display: table;
  clear: both;
}
h1 {
  color: #d92626;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 2.25em;
  font-weight: 400;
  line-height: 2.25;
  padding: 0.27777778em;
  text-align: center;
}
h1,
p,
ul {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
}
a:link,
a:visited {
  color: #d92626;
  text-decoration: none;
}
a:hover {
  color: #d92626;
}
.muggle {
  margin-top: 10px;
}
.muggle a:link,
.muggle a:visited {
  background-color: #d92626;
  color: #fff;
  padding: 10px;
  text-decoration: none;
}
.muggle a:hover,
.muggle a:active {
  background-color: #4db2Cb;
}
header {
  margin: 0 auto;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 0.0625em solid lightgrey;
  left: 0;
  margin-bottom: 1.25em;
  position: fixed;
  top: 0;
}
header:before,
header:after {
  content: "";
  display: table;
  clear: both;
}
.global-nav li {
  float: left;
}
.global-nav li a {
  display: block;
  padding: 0.875em 0.9375em;
}
.global-nav li a:link,
.global-nav li a:visited {
  color: #d92626;
}
.global-nav li a:hover {
  background: #d92626;
  color: #ffffff;
}
.global-nav li a:focus {
  background: #d92626;
  color: #ffffff;
}
.icon-heart {
  color: #d92626;
}
.main-intro {
  margin: 0 auto;
  width: 100%;
  max-width: 80em;
}
.main-intro:before,
.main-intro:after {
  content: "";
  display: table;
  clear: both;
}
.main-intro p {
  float: left;
  text-align: center;
  width: 100%;
  padding: 0 1.25em 1.25em 1.25em;
}
footer {
  margin: 0 auto;
  width: 100%;
  background: #ffffff;
  border-top: 0.0625em solid lightgrey;
  bottom: 0;
  color: #000000;
  height: 5em;
  position: absolute;
}
footer:before,
footer:after {
  content: "";
  display: table;
  clear: both;
}
footer p {
  float: left;
  text-align: center;
  width: 100%;
  padding: 1.25em;
}