Footer Down

base fiddles

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<div id="wrapper">
wrapper
  <div class="header">
    Header
  </div>
  <div class="main-content">
    main-content
  </div>
  <div class="footer">
    footer
  </div>
</div>

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 5%;
}



/* Footer DOwn */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

.header {
  background: #ff0;
  padding: 10px;
}

.body {
  padding: 10px;
  padding-bottom: 60px;
  /* Height of the footer */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Height of the footer */
  background: #6cf;
}


#wrapper {
  height: 100%;
}

#wrapper,
.header,
.main-content,
.footer {
  border: 1px solid red;
  padding: 20px 30px;
}