KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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
Tags (comma-separated)
Save Edits
Cancel