Page Widget How to - Leave padding space for Footer

Question

We would like to know how to leave padding space for Footer.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!-- ww w  .  j a  v  a 2  s  .co  m-->
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 100px; /* footer height */
}

#footer {
  position: relative;
  margin-top: -100px; /* footer height */
  height: 100px; /* footer height */
  clear: both;
  border: 1px red solid;
}
</style>
</head>
<body>
  <div id="wrap">
    <div id="main">main content</div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

The code above is rendered as follows: