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,833
    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?
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  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,801
    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
  •