Issue
I have the following html...
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
And following css...
.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}
But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?
+-------------------------------------+
| header | -> at fixed position (top of window)
+-------------------------------------+
| main |
| |
| | -> scrollable as its contents
| | scroll bar is window scroll bar not of main
| |
| |
+-------------------------------------+
| footer | -> at fixed position (bottom of window)
+-------------------------------------+
See this fiddle
Solution
you need to give width explicitly to header and footer
width: 100%;
If you want the middle section not to be hidden then give position: absolute;width: 100%;
and set top and bottom
properties (related to header and footer heights) to it and give parent element position: relative
. (ofcourse, remove height: 700px;
.) and to make it scrollable, give overflow: auto
.
Answered By - Mr_Green
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.