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 13 of 13
  1. #1
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretching CSS over entire page

    I'm having some problems with my CSS on a webpage that I'm doing. I have a solid colored bar on the right side of the page that I have set to a height of 100%. but when the page scrolls down the bar disapears, is there anyway to make it so the bar goes from the top to the bottom of the scroll?

  • #2
    Senior Coder Len Whistler's Avatar
    Join Date
    Jul 2002
    Location
    Vancouver, BC Canada
    Posts
    1,323
    Thanks
    26
    Thanked 100 Times in 100 Posts
    I'm new myself but I will take a crack at solving this one.....I assume this colored bar is a division? I think the bar will go down as far as the content in the division. No content and it stops at the bottom of the page.

    Leonard Whistler
    http://www.stubby.ca
    Leonard Whistler

  • #3
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    there is no content in the bar, it's just a blank bar that needs to go to the bottom of the page. It's a separate division from everything else

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Either link to the page, or attach the html file to a post and we will be able to help you.
    Mind reading isn't a specialty 'round here

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the page:

    http://www.jgadesign.net/mt/

    whenever the page has to scroll the side bar doesn't continue with the page

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Argh!

    That is one choked up page!
    I couldn't figure out how you implemented the bar because your page is very poorly structured and all the inline styles and tons of messy tables make it practically illegible.

    Get rid of the inline styles, move 'em all to the style sheet, get rid of deprecated attributes, and for crying out loud get rid of every single font element!!! The font element is evil, superfluous, ugly, bulky, pointless, not needed, and just plain bad! Did I mention ugly?
    CSS provides everything you need to style fonts.

    By the way: the page looks great, nice layout, snazzy color scheme, but the implementation leaves a lot to be desired. I don't think you will find it very pleasant to maintain in the long run either, so cleaning it up will be doing yourself the biggest favour.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a reason for this mess. The entire page is ASP based, so whoever maintains the page can go in to the admin page and change everything from there. I would normally use a .css page to cover up all the junk, but then I wouldn't be able to utilize the asp variables

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    But font?

    Oh... well... I can't really figure that out, but anyway.
    I've been toying with the page, and it seems like the height of that seperator you were asking about is derived from the height of the viewport (window), rather than the content. I still can't find how it's done, but maybe that'll give you a clue.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    when you do height:100%, should it do the whole page or just the viewport (window)?

  • #10
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jgallen
    when you do height:100%, should it do the whole page or just the viewport (window)?
    Viewport. Doh!

    The technique I was going to recommend was floating the bar from inside the content div, the giving it a margin which would push it outside the content div. (ensuring to leave a 1px overlap)
    But seeing as this is such a convaluted table mess I really can't help.
    All the best,
    Andrew

    I take no responsibility for the above nonsense.


    Left Justified

  • #11
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I cleaned up a lot of the mess, see if you guys can help me out now. Right now I have a temp fix of making it a set size for the sidebar, but this makes it so when it is viewed on larger resolutions, you will have a lot of white space.

    Doesn't this problem seem like it should be a lot easier to fix? Oh well....

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Found it!

    Phew... so it's the "vert-line" div, right?
    Why don't you create that divider by defining a left side border on the content div? That way, it'll allway be as long as the content and the exact height is not an issue.
    If you want to keep using the absolutely positioned div, the key is to make it a child of a suitable container with explicitly defined "position:relative". That should make the vert-line div inherit it's properties from the container, including it's height.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #13
    Registered User
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, it doesn't look like there is any way for me to get what I'm looking for huh? I'd love it if it would cover the entire page and cover everything while scrolling. No way of doing that huh?


  •  

    Posting Permissions

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