SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Best way to fix the height of a div?

    Quick question for the group; what's the best way to build a div with an absolutely fixed height? The div is absolutely positioned, overflow is hidden, and I set the same value for max-height and min-height, but a colleague said it would have been sufficient to just set the height of the div.

    TIA for your input and opinions!

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,807
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by moretea View Post
    Quick question for the group; what's the best way to build a div with an absolutely fixed height? The div is absolutely positioned, overflow is hidden, and I set the same value for max-height and min-height, but a colleague said it would have been sufficient to just set the height of the div.

    TIA for your input and opinions!
    I agree with your colleague.

    Have you tried all options?

    Are there any browser differences?

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Height is equal to the same max height and width.

  4. #4
    SitePoint Member
    Join Date
    Jun 2013
    Location
    Edmond, WV
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, agreed just use height. There should not be any browser differences when using height. Cheers!

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK.. so here is the rub.
    Your colleague is mostly right. setting max and min height is.. overkill at least. height: whatever ;, will set the height of a BLOCK element ( such as a div). Of course , if the content of the element EXCEEDS the size of the element it will overflow.. it's just the way it works ( remember that mug "CSS ROCKS!".. google it). At this point you have a choice: add overflow to hide or scroll the overflowed content.

    THEN THERE IS IE ( eating glue again), and this is probably what you are noticing older IE treats height as min-height AND it does recognize max/min-height at all. IE7 does not support "inherit" as a value on any of these properties. IE8 has some bugs with max-width/height combined with overflow: auto/scroll. Normally this worst in our favour when what we want is min-height, you case is the opposite. That's where overflow comes in. The only caveat beign that you don't really get a div (in old IE) which can be FIXED HEIGHT, and SHOW its overflow.


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
  •