Click here to Skip to main content
15,881,882 members
Articles / Web Development / HTML
Tip/Trick

Fixed or Sticky header or ASP.NET webpage

Rate me:
Please Sign up or sign in to vote.
4.89/5 (6 votes)
19 Dec 2010CPOL 50.4K   9   7
Fixed or Sticky header or ASP.NET webpage
If you want the header section of the website to be fixed on top with menus and other information, you can simply use the below CSS to do so:

CSS
.header
{
    background-color:Gray;
    width:100%;
    height:100px;
    position:fixed;
    top:0px;
    margin:0px;
    padding:0px;
}

body
{
    padding-top:110px;
    margin:0px;
}


Use it like:

HTML
<div class="header">
       Header content goes here...
</div>
<div>
       Body content goes here...
</div>


This can be used with Master pages too.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
United States United States
I am a developer in Microsoft Technologies like .NET, SharePoint etc.

Comments and Discussions

 
GeneralThanks, that does make things easier! Pin
Dr.Walt Fair, PE18-Dec-10 15:21
professionalDr.Walt Fair, PE18-Dec-10 15:21 
GeneralReason for my vote of 5 Thanks for sharing this tip Pin
linuxjr17-Dec-10 7:41
professionallinuxjr17-Dec-10 7:41 
GeneralReason for my vote of 5 My vote 5 for good work! Pin
Abdul Quader Mamun17-Dec-10 5:17
Abdul Quader Mamun17-Dec-10 5:17 
GeneralThank you so much for appreciation :) Pin
Wild-Programmer16-Dec-10 15:58
Wild-Programmer16-Dec-10 15:58 
Thank you so much for appreciation Smile | :)
GeneralGood Tips Pin
Abdul Quader Mamun16-Dec-10 8:33
Abdul Quader Mamun16-Dec-10 8:33 
GeneralReason for my vote of 5 That's good TIP, It's working like a... Pin
Hiren solanki15-Dec-10 21:19
Hiren solanki15-Dec-10 21:19 
GeneralGood Job Amit Pin
anil Madan20-Dec-10 7:48
anil Madan20-Dec-10 7:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.