SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to achieve 100% height with empty div

    hi folks,
    is it possible that a div can be 100% and if nothing is in that div or the content of the div is less the height should remain 100% with the given property like say background color is white of that div. how can i do that?
    All those who wander aren't lost.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    See the FAQ on 100% height for a full explanation (the link to the faq is in my sig).

    You can only use height:100% if the parent has a height defined. If the parents height is defined by content alone then it has no height to base the child on and will collapse to auto.

    If the parent has a fixed height the you can base a child on that height. e.g. if parent is height:200px then the child could be height:100%.

    If the parent's height is based on a percentage then it must also have a parent with a defined height and so on all the way up the tree.

    Even if the parent has a fixed height the setting a child to height:100% would mean the child could never grow and would spill out of the parent.

    Suffice to say that you can't use height:100% apart from the very first element on the page and then you can base a min-height:100% on html,body{height:100%;margin:0;padding:0}.

    Only absolute elements can base 100% height on a div that has height auto and has limited use as they can't contain content. They can be utilised for equal column background colours though.

    If you are looking for equal column effects then you can use my technique above or the faux column technique of repeating a background image on a parent that holds the columns.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thnx paul
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thuogh paul. The requirment of my web app as told to me have left me confused. as it should be 1280*800. and the web app is all based of tables coz of tabular data (u have seen it live many times, while helping me). now of different browser there might be or not be toolbars which will of course cut the space which i defined. which will result in my footer part being cut off (or any other). for a moment i get lost on how to to satisfy the needs. coz every person has no or many toolbars
    All those who wander aren't lost.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, for consistant results you could always just force scrollbars
    Code:
    html{overflow-y:scroll;}
    I don't know if you want the X axis scrollbar so I didn't include it above
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about mobile devices? lol.

    For me this is the age-old question... and trying to explain it to clients seems to stupify them. The adage 'I want it to look the same for everybody' just doesn't hold any water.

    The bottom line is that some people will have to scroll. According to your 1200+ width ALOT of people will have to scroll (depending on which demographic you are targeting). I've found its best to MAKE the client look at the design on a small 15" monitor, then make them look at it on a large monitor 23"+. Sometimes this makes the lightbulbs come on for them. Sometimes it just confuses them more.

    If you know your users will have javascript enabled you can do some window detection with that then adjust your css properties accordingly. But not knowing exactly who/what you are targeting I can't really give any further guidance as to that.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, for consistant results you could always just force scrollbars
    scroll's are a big no in my web app requirement.
    All those who wander aren't lost.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well there's no way to ensure that every singke page won't have scrollbars. Even if you design to fit within the viewport they could always make hte viewport smaller via resizing the browser.

    They could resize text thus making it too big.

    They could do any numbero f things to force scrollbars. Realistically you have to realize that scrollbars must not be feared
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lol tell them to my boss. thought what i want is everything smooth and without anything cutting it. basically i want a perfect showing of everything at 1280* 800
    All those who wander aren't lost.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If this is an intranet site where hte monitors are all the same size then this could feasibly be done (though still very breakable via user text increase/zoom)

    Get your boss on here to read this thread and I'll explain it to him
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •