SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height: 100% of the whole Document

    I need to have 2 sidebars (left and right) with height 100% of the Document. if i set the height of the divs to be 100% then its 100% of the window but not the whole document.
    How can I make it to take the 100% of the document? (mesuring the height of each document and then setting this value as the height is not a good solution)

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: height: 100% of the whole Document

    Originally posted by S7even
    I need to have 2 sidebars (left and right) with height 100% of the Document. if i set the height of the divs to be 100% then its 100% of the window but not the whole document.
    How can I make it to take the 100% of the document? (mesuring the height of each document and then setting this value as the height is not a good solution)
    I don't really follow. Wouldn't 100% of the window also be 100% of the document?

    --Vinnie

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe I am using the wrong words...
    Say you create a document that is 1000px height. And you are viewing this page using screen resolution 800x600, which (when you remove status bar, browser menus etc) will give you about 500px of height(this 500px is what i mean by window)
    When you set height: 100%; for a div, it will be 100% of the window(500px) not 100% of the whole document(1000px).

    So if my main div, has text that forces the document to be 800 or 1000 or 1500px, I want the sidebar to also be at the same size, and not stop at the 500px.

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you got an example online that we could look at ?
    in the meantime...have you tried putting a single div "container" around everything ? this should size to the height of the content, and then your sidebars (if they're set to height: 100%) should do what you want them to...unless i'm mistaken, anyway...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the example:
    http://64.247.55.97/heightproblem.html

    I tried using a container div but it din't work.

  6. #6
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    set {background: yellow} and the white area can be your .content or #content (whatever you prefer)

    .content {position: absolute;
    margin: 0, 0, 0, 150; }

    see if that works...
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  7. #7
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because the div are absolutley positioned, thus (from w3c):
    'is removed from the normal flow entirely (it has no impact on later siblings)'
    now this:

    Code:
    body	 	{margin: 0;height:100%;}
    div#sidebar	{
    		width: 200px;
    		height: 100%;
    		background: yellow;
    		float:left;
    
    }
    div#main	{
                    float:left;
    		left: 210px;
    		right: 0;}
    #container{
    height:100%
    }
    and adding <div id="container"></div> around your code will work in IE but not in Mozilla.

    IE seems correct (the parent element (body tag) has been set to 100%, both child tags have been set to 100% of parent). I tried html{height:100%} but it didn't make any difference either.

    cheers

    alastair

  8. #8
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to switch to CSS-P only layouts, but when i come across such things that are so simple to make with tables and so hard (imposible?) to make with CSS-P it makes me think twice about it.

  9. #9
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried this and it worked in IE6 but not in mozilla:

    This javascript in the head:
    function ff(){
    document.getElementById('sidebar').style.height = document.getElementById('main').clientHeight;
    }

    and this:
    <body onLoad="ff()" onResize="ff()">

    What is the equivalent of clientHeight for Mozilla/Netscape?

  10. #10
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, the following works in IE5+ NS6+ and Mozilla:

    function ff(){
    document.getElementById('sidebar').style.height = document.getElementById('main').offsetHeight;
    }

    This solves the problem.


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
  •