How do I make this sticky footer work?

Question

How do I make this sticky footer work?

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm trying to create a sticky footer but for some reason it pulls me down the footer making it not to be seen until the navigation bar is lowered. Try to change some margins but that does not seem to be the problem

* {
  margin: 0; }

html {
  height: 100%; }

body {
  height: 100%; }

.wrapper {
  min-height: 100%;
  margin-bottom: -40px; }
  .wrapper:after {
    content: "";
    display: block;
    height: 40px; }

.site-footer {
  height: 40px; }

* {
  box-sizing: border-box; }

body {
  background: #333;
  margin: 0; }

.wrapper {
  width: 80%;
  margin: 0 auto; }

h1 {
  font: 100% Impact, sans-serif;
  color: white;
  font-size: 99px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px; }

footer {
  text-align: center;
  color: white; }

/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <h1>Sumario de proyectos</h1>
</div>
<footer class="site-footer">
    2017 &COPY; Nestor y Diego
</footer>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>

html5 css

asked by Diego Sanchez Strange 19.08.2017 в 14:20

source

2 answers

Tag meta description author and keywors in all html pages? Access children of an iframe from the father of this

score 1 · Answer 1

* {
  margin: 0; }

html {
  height: 100%; }

body {
  height: 100%; }

.wrapper {
  min-height: 100%;
  margin-bottom: -40px; }
  .wrapper:after {
    content: "";
    display: block;
    height: 40px; }

  .site-footer {
   position: absolute;
   left: 0;
      right: 0;
   bottom: 0;
   }

* {
  box-sizing: border-box; }

body {
  background: #333;
  margin: 0; }

.wrapper {
  width: 80%;
  margin: 0 auto; }

h1 {
font: 100% Impact, sans-serif;
color: white;
font-size: 50px;
 text-align: center;
  padding-top: 20px;
 padding-bottom: 20px; }

footer {
  text-align: center;
  color: white; }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <h1>Sumario de proyectos</h1>
</div>
<footer class="site-footer">
    2017 &COPY; Nestor y Diego
</footer>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>

score 1 · Answer 2

Replace class h1 with this:

h1 {
  font: 100% Impact, sans-serif;
  color: white;
  font-size: 99px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px; }

and the site-footer class add:

.site-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}