0

I'm looking to construct min-height: 100% sections and it seems the general consensus is :

html{
  height: 100%;
}
body {
  min-height: 100%;
}

and direct children have min-height: 100% as well. The problem I can't wrap my head around is if HTML has fixed height 100% while body may be allowed to grow, hasn't it shot out of the page and the document is not very semantic, i.e. html < body. Also, if your section is wrapped up in several other divs, all parents will require min-height: 100% as well. This seems a little unconventional.

What would be the most elegant approach to it? I know height:100vh is the best approach if it were supported by all browsers. Would it be better to use javascript to obtain the viewport and set all interested sections' height property?

Nicholas
  • 139
  • 1
  • 11
  • possible duplicate of [height: 100% or min-height: 100% for html and body elements?](http://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements) – Mr. Alien Aug 24 '13 at 06:32
  • post your http://jsfiddle.net – Naveen Kumar Alone Aug 24 '13 at 06:33
  • 1
    @NaveenKumar Understand the question first, not all things need JS Fiddle – Mr. Alien Aug 24 '13 at 06:33
  • 1
    What do you mean when you say "the document is not very semantic, i.e. html < body"? `html` is *always* the parent of `body`, no questions asked. Whether `body` extends past the height of `html` doesn't change that. – BoltClock Aug 24 '13 at 06:35
  • Also it might help to see the markup that you have. At least, the structure of your sectioning elements. I think this sort of stuff is dependent on the layout structure. – BoltClock Aug 24 '13 at 06:42
  • HTML is a wrapper tag with contains other tags. How will `html < body`? When you float body ?? ha ha. You are cracking me up. IF that happens you need serious change in your code. – Starx Aug 24 '13 at 06:43
  • What is `height:100vh`? – Starx Aug 24 '13 at 06:45
  • @Starx it's a new unit http://stackoverflow.com/questions/13948713/is-there-any-cross-browser-javascript-for-making-vh-and-vw-units-work – Mr. Alien Aug 24 '13 at 06:47
  • I'm a bit worried by "Also, if your section is wrapped up in several other divs, all parents will require min-height: 100% as well.". If your purpose is to display only one block of content the size of the viewport, why wrap it in several other divs? Why do you think you need the divs? What would they do? – Mr Lister Aug 24 '13 at 07:03

1 Answers1

0

The "unconventional" issue is actually very true and conventional. You see, browsers only calculate "horizontal" layout, not vertical unless explicitly set. So if you want an item to have a height of 100%, then you'll need to set some height explicitly to all it's ancestors so that the browser can calculate the dimensions.

kumarharsh
  • 18,961
  • 8
  • 72
  • 100