min-height|height html, body acting strange

Question

I'm working on a website that have pages that exceed 100% browser window height and ones that do not. So, what I need is the height to be at least 100% but higher if applicable.

My current CSS looks like:

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

This initially seemed to work fine but then I realized that <body> does NOT have the same height as <html> but rather seems to use the standard height. It is like <body> does NOT respect the min-height property.

Hopefully, someone can toss some ideas or shine some light on this.

UPDATE1 It seems like HTML is acting as if it was default too..

UPDATE2 http://jsfiddle.net/rpz4rd4c/5

UPDATE3 According to the suggested comment by ( MichaelHarvey ) the body height is relative to the html height ( not min-height ) if that was true the following code should work:

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

body {
  height: 100%;
}

However, it doesn't.

FINAL UPDATE

The solutions provided on this page "work" however they might be buggy with JS plugins. I would recommend people to use 100vh solution or the one I accepted as answer ( mainly because it requires no CSS3 ). I guess a 100% accurate solution to a problem like mine (having all dividers and elements 100% non-related to browser window) would be to simply use inline CSS and use min-height at longer pages and a height at browser fitting ones. This might require some JS.

<3

Can you give us a link or a [jsfiddle](http://jsfiddle.net) example? — Adrift, Oct 21 '14 at 00:30
See if this answer helps you: http://stackoverflow.com/a/20681480/3781639 — Michael Harvey, Oct 21 '14 at 00:36
@MichaelHarvey I did specify a height. So, no it doesn't really help me. — KaekeaSchmear, Oct 21 '14 at 00:39
@MichaelHarvey The problem is that the `body` is not relative to the height of `html` see Update 3. — KaekeaSchmear, Oct 21 '14 at 00:42
Are you sure you want the height to be more than 100%? This makes scrolling a living hell for users — markasoftware, Oct 21 '14 at 00:46
@Adrift No, that would make the `html` only `100% height` of the browser window.. — KaekeaSchmear, Oct 21 '14 at 00:47
@Markasoftware In some cases the content will be higher than `100% browser window height`, I want the elements `html, body, .container` to expand with them accordingly; they won't if I make it `100%` — KaekeaSchmear, Oct 21 '14 at 00:48
What exactly is the problem with `html, body {height: 100%;}`? This is used all the time with pages that could be the full height of the viewport (or not). What happens when you use this that you're not wanting? http://jsfiddle.net/rpz4rd4c/6/ (Note you see no black.) — Jared Farrish, Oct 21 '14 at 01:23
@JaredFarrish When the content of the page exceeds the browser height it will leave the `html, body` div. That is problematic. — KaekeaSchmear, Oct 21 '14 at 01:42
This seems to work (according to Chrome style styles)? http://jsfiddle.net/rpz4rd4c/9/ — Jared Farrish, Oct 21 '14 at 02:09
I've looked for a solution for this forever and have never had any luck. Is there a specific thing that you are trying to accomplish with the 100% height that there might be a workaround for? (ie, a 100% height sidebar, background image, etc?) — Jesse Kernaghan, Oct 21 '14 at 02:36

markasoftware · Answer 1 · 2014-10-21T02:45:43.553

2

Viewport units to the rescue! The vh unit in CSS works relative to viewport height regardless of parent elements and all that fuss. Here's the CSS you should put on the body:

body{
    min-height:100vh;
    margin:0;
}

See http://jsfiddle.net/rpz4rd4c/3/ for my working example

EDIT: for your other elements that also need to be at least 100% height, just add min-height:100vh to their CSS styling as well. Thanks @misterManSam!

edited Oct 21 '14 at 02:45

answered Oct 21 '14 at 00:54

markasoftware

12,292
8
41
69

In combination of other dividers though, this will not solve the problem. Do you suggest using `min-width: 100vh` in every divider that requires 100% or larger height? Also, this is not supported by a lot of browsers, is it? – KaekeaSchmear Oct 21 '14 at 01:19
Yes, I do suggest that, if you're you need to set their height to at least the page height. And, it's supported by virtually all modern browsers: http://caniuse.com/#feat=viewport-units – markasoftware Oct 21 '14 at 01:26
But I require some elements to be relative to this specific divider. That doesn't seem to work. __UPDATE__ http://jsfiddle.net/rpz4rd4c/7/ – KaekeaSchmear Oct 21 '14 at 01:41
1

@Removed - if you want to go down this path, don't apply any height to the html or body at all. [In this example](http://jsfiddle.net/onh1dv8w/), each container gets at least 100% of the viewport height and will resize with its contents. – misterManSam Oct 21 '14 at 02:43

Jared Farrish · Accepted Answer · 2014-10-21T02:17:26.843

2

This seems to work with Chrome:

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

http://jsfiddle.net/rpz4rd4c/10/

Of course, this means the html element never takes the full child's height (only the viewports). Hopefully that's not an issue.

edited Oct 21 '14 at 02:17

answered Oct 21 '14 at 02:12

Jared Farrish

48,585
17
95
104

Thank you. Its' unfortunately buggy with a plugin i'm using. But i'm sure I will find a work around. :-( – KaekeaSchmear Oct 21 '14 at 02:52

score -1 · Answer 3 · answered Oct 21 '14 at 02:45

Without really understanding the why, perhaps this is what you're looking for?

html:

<html>
  <body>
    <div class='wrapper'>
      <div class='inner'>
        <!-- your content here -->
      </div>
    </div>
  </body>
<html>

css:

html,body{
  height:100%;
  overflow:hidden;
}

.wrapper{
  height:100%;
  overflow:scroll;
  background:#f9f9f9;
}

The html and body are always 100% height, and no matter what the content length it will still scroll. Not sure on the side effects of locking the html/body scrolling (lots of potential issues) however, so I'd be wary.

Example: http://codepen.io/jessekernaghan/pen/GocHg

min-height|height html, body acting strange

3 Answers3