I am trying to create a page with a fixed header and a fixed footer. I would like to display content immediately below the header and have its relative position maintained when the window is re-sized. When the content is too large for the display, I would like a vertical scroll bar to appear so the content can be scrolled between the header and footer. I have not been able to achieve this.
I’ve attached test code. When I re-size the webpage, the content area is not positioned immediately under the header and the scroll bar is not active.
What technology should I look into (php, javascript, etc) to solve this problem? Any help would be much appreciated. Many thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”mydemo.css”>
</head>
<body>
<div class=”pageHeader”>
This is the header.
</div>
<div class=”pageContent”>
<div class=”container”>
Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
Line 8<br>
Line 9<br>
Line 10<br>
Line 11<br>
Line 12<br>
Line 13<br>
Line 14<br>
Line 15<br>
Line 16<br>
</div>
</div>
<div class=”pageFooter”>
This is the footer.
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: lightblue;
}
.pageHeader {
position: fixed;
width: 100%;
height: 10%;
top: 0;
text-align: center;
background: yellow;
opacity: .5;
z-index: 2;
}
.pageContent {
position: fixed;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
background: lightgrey;
}
.pageContent .container {
position: relative;
width: 50%;
top: 0;
margin: auto;
border: 1px solid blue;
overflow: scroll;
}
.pageFooter {
position: fixed;
width: 100%;
height: 10%;
bottom: 0;
text-align: center;
background: yellow;
opacity: .5;
z-index: 2;
}