Page Widget How to - Scroll only the content with fixed header

Question

We would like to know how to scroll only the content with fixed header.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {<!--from www. j  av  a  2  s  .com-->
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#header, #red {
  position: absolute;
}

#header {
  border-bottom: 1px solid #000;
  background: yellow top:0px;
  height: 80px;
  width: 100%;
  left: 0px;
  right: 0px;
}

#red {
  bottom: 0px;
  top: 80px;
  left: 0px;
  right: 0px;
  background-color: red;
  overflow: auto;
}
</style>
</head>
<body>
  <div id="header">
    <p>
      Hi<br />
    </p>
  </div>
  <div id="red">
    First row <br />
    <br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> One row..<br /> One row..<br /> One row..<br /> One
    row..<br /> One row..<br /> One row..<br /> One row..<br /> One row..<br />
    One row..<br /> <br /> Something
  </div>
</body>
</html>
The code above is rendered as follows: