height 100% or 100vh on body & html?

[jensimmons]

Do we want to include something like:

html, body {
  height: 100%;
}

or

html, body {
  min-height: 100vh;
}

???

to keep the page from being super short in the browser window.

[mirisuzanne]

I tend to use the latter (min-height) on every project. Doing it by hand I apply to either html or body - but as a default I see the sense in setting both.

[charakterziffer]

In this context maybe min-height: -webkit-fill-available; should be added. According to https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ it prevents the bottom of a website to be hidden behind mobile Safari’s menu bar.

[giuseppeg]

Probably it is not necessary to set it on the html element too

[Malvoz]

Cross-referencing https://github.com/w3c/csswg-drafts/issues/4329 in regards to https://github.com/jensimmons/cssremedy/issues/70#issuecomment-629651697.

Edit: Per https://twitter.com/bfgeek/status/1262459015155441664, to cater for Chromium aligning on Firefox's behaviour, add the declarations to both html and body:

html {
  height: -webkit-fill-available; /* https://twitter.com/bfgeek/status/1262465912025698304 */
}

html, body {
  min-height: 100%; /* We keep this right? */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* We want the vendor-prefixed value to take affect
                                         in browsers that support it, fall back to 100vh,
                                         then 100%. */
}

[kripod]

Cross-referencing w3c/csswg-drafts#4329 in regards to #70 (comment).

Edit: Per https://twitter.com/bfgeek/status/1262459015155441664, to cater for Chromium aligning on Firefox's behaviour, add the declarations to both html and body:

html {
  height: -webkit-fill-available; /* https://twitter.com/bfgeek/status/1262465912025698304 */
}

html, body {
  min-height: 100%; /* We keep this right? */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* We want the vendor-prefixed value to take affect
                                         in browsers that support it, fall back to 100vh,
                                         then 100%. */
}

I would love to see this approach implemented as a remedy. It seems to adapt content of any size, and would progressively enhance the user experience on mobile devices.

Sticky footers would be a breeze to implement with these additions.

[kripod]

Now there is a PostCSS plugin written for the purpose, which avoids applying the fix in Chrome.

@jensimmons I hope you are on the path of recovery from COVID-19 and will get better soon. Take care of your health first, I wish you all the best!

[NMoore-STEM]

First comment on GH, but recently ran into issues of html and body having 0px height no matter what fix I used (including height:100%, height:auto, height:100vh, clear fixes, zeroed margin and padding, etc. etc.). I am relatively new to web dev.

I was looking for solutions online to my problem and found this conversation and wanted to share my troubleshooting approach as it seems to loosely apply to this scenario.

While inspecting elements, make note of the dimensions that show on hover as you move along the elements in your HTML (I am using FF dev tools included with the browser). The next element past the html and body that shows full height of the document is likely your problem, especially if it contains all other elements.

My page had a tiled svg pattern and many CSS rules applied to that element. Additionally, all other elements were children of this background div. The problematic rule that solved my problem was having position:absolute in there. Once that was removed, the html and body automatically took on the full height of all the other elements combined. I am assuming that the absolute positioning took everything out of the flow/ height calculations in the DOM? Anyhow, hope this helps others that may have the same issue.

This applies to the original issue as you might have container elements/divs as direct children of the body that have absolute positioning that is shortening your html or body height.

[BassOfBass]

Browsers tend not to agree on what constitutes a viewport value so using relative ones is safer bet.

[mirisuzanne]

The linked PostCSS plugin uses:

1. browser-prefixes (-webkit-fill-available would be our first)
2. browser-sniffing css hacks (-webkit-touch-callout is not relevant here except for the browsers excluded)

I'm a little bit wary of point 1 (it might need more discussion in the abstract), but I'm very wary about point 2.

On the other hand, that linked twitter thread includes a suggestion from Adam Argyle that doesn't rely on either of the above:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

(He uses the block-size logical properties rather than height, which we could consider.)

[Flo2ent]

Hello, this is my proposal:

html {
  /* writing-mode: horizontal-tb ============================== */
  height: 100%;
  /* height: 100vh; -- Usefull? */
  height: -webkit-fill-available;

  /* writing-mode: vertical-rl ================================
                or vertical-lr ================================ */
  /* width: 100%; */
  /* width: 100vw;  -- Usefull? */
  /* width: -webkit-fill-available; */

  /* Logical properties ======================================= */
  block-size: -webkit-fill-available;
  /* stretch is the new value defined in Box Sizing 4: https://w3.org/TR/css-sizing-4/ */
  block-size: stretch;
}

body {
  /* writing-mode: horizontal-tb ============================== */
  min-height: 100%;
  min-height: -webkit-fill-available;

  /* writing-mode: vertical-rl ================================
                or vertical-lr ================================ */
  /* min-width: 100%; */
  /* min-width: -webkit-fill-available; */

  /* Logical properties ======================================= */
  min-block-size: -webkit-fill-available;
  min-block-size: stretch;
}

[Malvoz]

Not sure what the status of -webkit-fill-available is (or how the new lvh, svh, dvh, lvw, svw, and dvw units fit into this), but going back to the original question of:

html, body {
  height: 100%;
}

or

html, body {
  min-height: 100vh;
}

???

I think one important consideration between the two is that the former declaration allows authors to set e.g. <div> elements to height: 100% and have their expectations met. Refer to this SO post with, currently, 500k views: https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height.