I am trying to create a page which will be have header and footer div with unknown height (or min-height) and middle content with scroll if the content increases and all these three should fit in screen only.
I tried below and works if the height of header and footer is fixed and if only middle content increases then i get scroll for content div perfectly. How do to handle unknown height part for header and footer to make it fit? I gave min-height but doesn't
work.
#Pageheader {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: Blue;
}
#Pagefooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color:red;
}
#Pagecontent {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #EEEEEE;
overflow: auto;
}
<body>
<form id="form1" runat="server">
<div id="Pa ...
Go to the complete details ...