Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts

    CSS scrolling with fixed header

    I'm working on a website conversion project. There's one element I'm having a bit of trouble with in relation to CSS.

    Currently the site is "tall" meaning the user has to use the browser scroll bar to scroll down and see all the content including the footer.

    The goal is to have the site header stay in a fixed position on the screen and have the user use a scroll bar within the content to scroll up and down, always having the header be fixed and visible on the top of the screen.

    Is this a candidate for the "overflow" property? Or would I need jquery to do something like this?

    Thanks for thoughts...

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    396
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Just fix the header in CSS:

    #header {
    position:fixed; top:0px; left:0px;
    }

    Then for the start of the content set margin-top equal to the height of the header.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Wow, that looks a lot easier than I thought it would be.

    Thanks a bunch!

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    FYI, this works except the margin-top needs to be padding-top.

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •