SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Screen height minus a figure and write CSS

    Hi,

    I am completely new to this so I thought I'd ask as I couldn't find anything using a search.

    Effectively I want to set the height of a CSS div by geting the window height and then subtracting the hieght of the header and footer.

    So lets say that the header is 200px high and the footer is 150px high

    I want the script to get window height - 350px and then write the style.

    .content { height:Xpx; } where X is window height minus 350px

    Any ideas where to start.. and finsih
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use CSS to absolute position the div and use the margin attribute to account for the header and footer? Then again.. that wouldnt work for pages with a scrollbar that are larger than the browser's height. So you could use a CSS layout seen in these examples. Using a pure CSS method would eliminate problems when viewing the website in a window smaller than your resolution and vice versa that may be caused by this JavaScript method.

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps it would help if I show you what I am trying to achieve - I have been on the CSS forums to ask how this can be done and really theres not much of a solution as far as I can discover.



    The problem I have is to get the .content div to take up the whole space between a header that sites at the top and moreinfo that must always sit at the bottom of the window.
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  4. #4
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CSS forum didnt have a solution for you? The solution is simple! Just use this example layout without the left and right columns:

    Hrm.. it seems BonRouge isnt working at the moment. Ill give you the link once its up again.

  5. #5
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I look at all of those and none do as required - some are similar but when you try to make then do exactly what I require they break - Paul'O gave me a good run through with trying to get it to work though quirls mode but to no avail

    So... I would really appreciate some help in writing this JavaScript - firstly it may solve my problem and secondly it might help me dip my toe into the sea of JavaScript
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Durban
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Similar issue with a partial solution

    Hi

    The problems as I see them are:
    1. Setting height:100% doesn't work for all css layouts on all browsers
    2. Setting height:100% doesn't work when you use an up-to-date DTD
    3. There are several Javascript code bits for adjusting the height of elements but these:

    1. are for getting, say, 3 columns to an equal height, but not for getting them to all resize to fill the screen
    2. don't work perfectly on all browsers
    3. don't readjust the elements if the browser window is resized.


    I have found/hacked a script that does work, but I think it could be streamlined. See my post and example at: http://www.sitepoint.com/forums/showthread.php?t=271368.

    Apart from JS reliant frameworks, I have just seen a pure-css example (referred to in this thread) at http://bonrouge.com/3c-hf-fluid-lc.php - I need to test it in the real world now :-)


Bookmarks

Posting Permissions

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