Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11

Thread: page height

  1. #1
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    I want to be able to use a CSS code to make the webpage stretch to the bottom. I uses 100% but in firefox, it doesn't go all the way down (some of the conect is on the background) and in IE, it fits all the contect, but it if you don't need to scroll down, the box fix tight to the content. 100% on IE is fixing on the content, not the whole page. I don't want to go to each page and use a css code for each page to tell how long each part is on that page.

    Its kind of like wordpress, the content, nav, etc stretches far enough so all the contect is in the webpage itself, and if I don't need to scoll down, then it would go all the way to the bottom.

    on my website right now. I am tring 100% height in the CSS code.
    http://aureole.awardspace.com/

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I don't think that can work... there's a method called Faux Collumns, explained at http://www.alistapart.com/articles/fauxcolumns (posted by Karinne).

    Generally, all heights follow the size of its contents.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    That is a problem with CSS.

    Faux columns would be the way to go ... and in your case, it
    will be a bit easier than most.

    You would have one background image that is light gray with
    the green edge on it, extending across the screen. The
    "main" <div> would remain the same. You then only need to
    deal with the top header and corner image, which could probably
    stay the same.

    In summary, you're combining the gray background and your "end.png" image.


  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    ... In which case it would be easier to just extend your entire layout to fit 1024, or make your content section fluid, and align the bg to right.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    ok. the tutorial isn't not working for me. combining the nav background to the background isn't working for me either unless I have a major redesign.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Kayo ...

    First of all, the CSS property is:

    background: url(image.gif);

    not

    background-image: url(image.gif);


    I have sort of a working example:

    http://www.catpin.com/kayo

    See the HTML sourcecode and CSS.
    I know it works in IE, but not sure about FireFox (I don't have that at home).
    If the background image doesn't extend down the main content, I'll see if I
    can fix it tomorrow (Wed).


  8. #7
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Confirming that nothing is extending to the page bottom in Firefox 2.0.0.1 on Windows.

    I say, for your needs, get a background image, align it right, then float your navbar right, thus making your main content area fluid. Easiest way I can think of.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yes, getting a page with less than full content to stretch to the bottom is very problematic in Firefox. For once, I'm not actually sure if they're following standards or not (I haven't looked it up), but setting a height of 100% on things is supposed to make them the full height of the body. The problem is that you can't set the body's height to fill the browser's viewpane.

    I have yet to be able to figure out a solution for this, aside from setting a set minimum height. A set minimum height (using the [minicode]min-height[/minicode] CSS directive) should only affect Firefox, but it also won't work as nicely across resolutions. So setting the min height to 1000px would be fine for someone running 1280x1024, but it would make someone at 800x600 scroll. At the same time, setting the height to 800 wouldn't fill up the browser of someone at 1280x1024. Then you have to take into account that people have different toolbars and such, and things get rather complicated. Javascript could be used to solve the problem (i.e., as soon as the page loads, make the set min height be equal to whatever the height of the viewpane is), but I never liked that approach and so never implemented it. Whether you do so is up to you :-)

  10. #9
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    I can't believe something thats used alot could be so complex

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Everyone is hoping that this gets resolved with CSS3.

    This is one case where IE does it right, even though it's wrong.

    I'm guessing the only thing in my case would be to make it a
    <body> background image instead and paste a banner image
    over the top of it to create the banner .. like a true faux column.
    I thought I could do something trickier, but am wrong as usual [sigh].



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com