SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    whats the difference...

    between "height" and "max-height"/"min-height"

    if an element has a max height will the element resize till the max height instead of using a static "height" set?
    Free Science Homework Help
    http://www.physicsforums.com

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dethfire
    between "height" and "max-height"/"min-height"

    if an element has a max height will the element resize till the max height instead of using a static "height" set?
    How it should work:
    Height is the height of an element, plain and simple. If no height is specified, min-height and max-height should take over as absolute boundaries of an element's height. Even if a height is specified, min- and max- should serve as the boundaries. For example:
    Code:
    #stuff {
      height: 50%;
      min-height: 200px;
      max-height: 500px;
    }
    The normal height of #stuff is 50% of its container. It will always be at least 200px or at most 500px tall though. If that 50% falls within those boundaries, great, the browser will work with it.

    How it really works:
    Mozilla and Opera get min- and max- right for the most part. IE screws it up and treats height as min-height, but doesn't understand min-height and max-height when written in a stylesheet. So in our previous example, #stuff will be 50% tall unless there is more content than can fit in 50%. In that case, IE will make the box as tall as necessary to fill the content. This is good for some people but can cause havoc with precisely laid out pages.

    Here's an acceptable workaround that I've used in the past to overcome the IE problem:
    Code:
    #stuff {
      /*dummy rule for IE/Windows*/
      height: 200px;
    }
    html > body #stuff {
      /*rule for CSS2 browsers that get min-height right*/
      height: auto;
      min-height: 200px;
    }
    Hope this clears things up! If anybody sees an error in my explanation feel free to correct me .

  3. #3
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does IE/Win also have the same problem with width/min-width/max-width ?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BenANFA
    Does IE/Win also have the same problem with width/min-width/max-width ?
    No, IE/Win just doesn't support that at all .


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
  •