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
    New Coder
    Join Date
    Aug 2005
    Posts
    73
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Set page height to minimum of screen height

    I started with the css layout generator at CSScreator, and I've chopped and changed a little... mostly added bits to get where I am now.

    I've pretty much got there with what I want (apart from the content itself), except for two issues. One is that I want to set the page to 100% of the height of the screen. I have tried the "height:100%;" attribute in various places to no avail... but it seems that it does actually have an effect if I set a definite value ("height=500px" for example), but that presents it's own no doubt obvious problems (the page doesn't then expand expand with content).

    The other problem I seem to have relates to the positioning of the text on the footer. MSIE does exactly what I would like it to do, but Firefox seems to add a small space below the footer image, and the developer toolbar of firefox gives me no clues where it comes from... I'm pretty much stumped on both counts!

    If anybody could help, I'd very much appreciate it.

    Any help would be much appreciated.

    index.html
    birds.css - same css for each page.
    Last edited by rhia; 08-24-2007 at 12:59 AM.

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    73
    Thanks
    12
    Thanked 0 Times in 0 Posts
    OK - the strange space at the bottom of the window in Firefox I've just fixed by adding a wrapper. I don't know why it fixed it, but it did.

    I still have no idea how to set it so that the page stretches to the bottom of the window though. I've tried the height:100% in various places, including the new wrapper to no avail. I tried the "faux column" trick within the content column... stretching an image vertically. That was also to no avail, probably due to the overflow:hidden which I had to add there in order to use italics without IE adding it's extra pixels and shifting the left column below it.

    I'm not really good at CSS (perhaps even useless) - though I am trying... Not doing too badly it seems, all things considered, even if I have spend a good few hours at it! I am completely clueless over this height issue though, and would really appreciate some help with it. The code is updated on the links above.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Have you set the height of the html container to 100%? If not then the content of the page will just be 100% of the container which will only be as high as its contents.

    html, body {height : 100%;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    73
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Yes - that's one of the variations I tried to no effect.

    I also have
    Code:
    html {
      height:100%;
    }
    ...above the...

    Code:
    html, body{
     margin:0;
     padding:0;
     text-align:center;
     background-color: #886f6f;
    }
    ...in the current stylesheet (I did try the height in the latter also) to no avail. That's when I thought that it might be a good idea to try stretching "#wrapper" with a repeating image, but that didn't work either, with the added problem of making the left tiled background dissapear.


  •  

    Posting Permissions

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