SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make an element cover just the whole screen?

    Well, the topic description isn't exactly perfect, but anyways:

    I want my div to cover the whole screen. And just that.
    That should do the trick but it doesn't:


    --------------------------------------------------------------------
    <style>
    div {border: 10px solid black;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;}
    </style>

    <div>

    </div>
    ---------------------------------------------------------------------



    But this works only in NS and Mozilla but not in IE or Opera.
    How to do this?

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Frstly set your body css so it has margin: 0 (and padding: 0 to keep Opera happy).

    Then simply give your div height and width attributes that use %.

    Code:
    <style type="text/css">
    	
    body {
    margin: 0;
    padding: 0;
    }
    
    div {
    width: 100%;
    height: 100%;
    }
    
    </style>
    Works in Moz/NN6+, IE5+.
    Opera still seems to have problems making it 100% wide (100% height works ok, though loses that too on resize), but given that the above code is compliant, I put Opera's problems down to yet another hole in their much lauded reputation for standards compliancy.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I know that, but ... See, there are two problems:

    1. I want to reference it in JavaScript. For example:
    onclick="element.style.top = 0;
    element.style.bottom = 0;

    so that it covers the whole screen. Cause you can't use percentages in JavaScript (or is there a way?).


    2. You can't always use percentages. For example:
    You have a div id="bottom"
    #bottom {position: absolute;
    bottom: 0px;
    height: 10px;}
    and then you would like the div id="main" to cover the rest of the screen, but you can't do it like this:
    #main {height: 92%;}
    It would work in one resolution but not the other.
    This should work (according to specification), but it doesn't:
    #main {position: absolute;
    top: 0px;
    bottom: 10px;}

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, it may have been easier if you'd mention the javascript angle earlier, but anyway....

    Originally posted by Rok
    Yes, I know that, but ... See, there are two problems:

    1. I want to reference it in JavaScript. For example:
    onclick="element.style.top = 0;
    element.style.bottom = 0;

    so that it covers the whole screen. Cause you can't use percentages in JavaScript (or is there a way?).
    No problem. You can use percentages just fine using the DOM.
    It's best to wrap it in a function to keep it flexible and reusable...

    Code:
    function scriptName(id,percentage) {
    document.getElementById(id).style.height = percentage + "%";
    }
    The function call to make the div area fill the window height (100%) would look like...
    Code:
    onclick="scriptName('myDiv','100')"
    Anyway, that's just to show you one of several ways that you can get/set percentages in javascript.


    2. You can't always use percentages. For example:
    You have a div id="bottom"
    #bottom {position: absolute;
    bottom: 0px;
    height: 10px;}
    and then you would like the div id="main" to cover the rest of the screen, but you can't do it like this:
    #main {height: 92%;}
    It would work in one resolution but not the other.
    This should work (according to specification), but it doesn't:
    #main {position: absolute;
    top: 0px;
    bottom: 10px;}
    In this case you wouldn't need to use percentages anyway.
    You simply need to refer to the height of the body (the area inside the window chrome) by referencing it via the DOM.
    Then all you need to do is subtract whatever number (of pixels) you want to 'stay clear' from the bottom of the window.

    There are a variety of methods such a function could use to do what you require.
    window.innerHeight and window.innerWidth are equally valid possibilities, though neither are universally supported yet.
    They will be though (at least by the major browsers), as it is the W3C recommended DOM method.

    The W3C DOM method is...
    Code:
    document.getElementById(id).style.height = window.innerHeight - 10 ;
    This method will already work in Moz/NN6+ as they both support the innerHeight and innerWidth attributes already.

    Opera seems not yet to support any method for referring to the height of the document (or at least none of those that I tried).

    It will not *yet* work in IE5+ (as the W3C DOM is not fully supported).
    However, IE will still respond to its 'old' proprietory DOM method equivalent of innerWidth/innerHeight, which is document.body.offsetWidth and document.body.offsetHeight.

    Code:
    document.getElementById(id).style.height = document.body.offsetHeight - 10
    By using this method you can still set an object to be full height of the window - 10 pixels.

    To integrate that facility into a function whilst keeping the space needed at the bottom as a variable...

    Code:
    function scriptName(id,xs) {
    if ( navigator.appName=="Microsoft Internet Explorer" ) {
    document.getElementById(id).style.height = document.body.offsetHeight - xs
    } else {
    document.getElementById(id).style.height = window.innerHeight - xs
    }
    }
    ...with the function call...

    Code:
    onclick="scriptName('divname','10')"
    This will work for both Moz/NN6 and IE.

    In this function xs would simply be set to whatever height you have set for the bottom div.
    Incidentally, if you don't know what it is set to (i.e. if it is set dynamically) then you can get its height by also using the DOM.
    Ask if you need to know.


    Sorry for the long-winded response, but everything you need is in there.
    I hope it helps
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hehe, thanx :>

    So there's nothing for me to say/ask . At least for now .
    Thnx


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
  •