SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS height:

  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Location
    Miami Fl
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry CSS height:

    Is there any way to set a particular <div> element to a height based upon percentages /and/ have it work in IE 5.5+ ? IE tends to ignore the height: attribute when there is a percentage and adjusts the box to fit the content.
    -= Eric

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure but you could check here:
    http://www.thenoodleincident.com/tut...rkarounds.html

  3. #3
    SitePoint Member
    Join Date
    Jun 2002
    Location
    Miami Fl
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Figured it out!

    Ok, after reading through the support.microsoft.com site I came across something which works on IE 5.0 but still has yet to be tested under any of the other browsers.

    <div style="height: 80%; width: 100%;">
    <div style="height: 100%; width: 100%;">

    <p> Content shmontent </p>

    </div>
    </div>

    I'll verify this works on other browsers later, but so far the results look promising.

    What this apparently does is set a containing block element that is limited to the size set in the percentage, and the second element is set to 100% of the containing element.
    -= Eric

  4. #4
    SitePoint Member
    Join Date
    Jun 2002
    Location
    Miami Fl
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Even better solution.

    Did something MUCH more elegant and cross-browser friendly than my prior attempt at this. Look through the following.

    BODY {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    }

    Now, I went ahead and just deleted one of those divs and it is now just a matter of this code:


    div.content {
    position: absolute;
    overflow: auto;
    width: 100%;
    height: 50%;
    }

    Using this code; this window can be placed anywhere, sized accordingly and does allow scrolling from within the div.
    -= Eric


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
  •