iPenguin Posted November 8, 2006 Share Posted November 8, 2006 Hello,Sorry if this is a really dumb question.. I want to have a navigation bar at the bottom of a page and have it not move, while the rest of the page scrolls. I don't want to use frames because I need the nav bar to change. Is there a way to do this using CSS? Thanks for any help you can give!-iPenguin Link to comment Share on other sites More sharing options...
jesh Posted November 8, 2006 Share Posted November 8, 2006 How about something like this: <html><head><style type="text/css">#Main { height: 90%; overflow: auto; background-color: #c00;}#Bottom { height: 10%; background-color: #0cc; }</style></head><body> <div id="Main">Main Content</div> <div id="Bottom">Bottom</div></body></html> The major flaw with this though would be the percentages used for the heights. This makes the bottom section grow/shrink depending on the size of the browser window. Benefit is that the main section scrolls while the bottom section stays put. Link to comment Share on other sites More sharing options...
iPenguin Posted November 8, 2006 Author Share Posted November 8, 2006 Thanks jesh,I tried something like that out and it wasn't working the way I wanted... It scrolled properly but I'd prefer the bottom bar to be a fixed size. Would it be easier to keep it one size and have the top scroll if I use an image for the nav bar?Thanks again,-Pascal Link to comment Share on other sites More sharing options...
jesh Posted November 8, 2006 Share Posted November 8, 2006 OK, how about this? <html><head><style type="text/css">body { margin: 0px; padding-bottom: 60px; }#Main { height: 100%; overflow: auto; background-color: #c00; }#Bottom { height: 60px; width: 100%; background-color: #0cc; position: absolute; bottom: 0px; }.Content { margin: 6px 12px; }</style></head><body><div id="Main"> <div class="Content">Main Content Goes Here</div></div><div id="Bottom"> <div class="Content">Bottom Content Goes Here</div></div></body></html> Link to comment Share on other sites More sharing options...
iPenguin Posted November 9, 2006 Author Share Posted November 9, 2006 Excellent!That did the trick! Thank you so much!-iPenguin Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now