min-height does not work with body

HtmlCss

Html Problem Overview

Does min-height not work on body/html?

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

Accomplishes absolutely nothing (firebug reports the body,html tags height does not change at all)

Html Solutions

Solution 1 - Html

First, declare a doctype so you're in standards if you haven't already.

Now, the body can only be as high as the containing html, so you need to set HTML tag to 100% height, and body to min-height 100%. This works for me on Firefox.

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

Solution 2 - Html

This worked for chrome 64 without setting a hard-coded height:

html {
    min-height: 100%;
    display: flex;
}

body {
    flex: 1;
}

Solution 3 - Html

Not all browsers like min-height, try something like this to catch all browsers.

  min-height:100%;
  height:auto !important;
  height:100%;

Solution 4 - Html

I solved the problem with just:

body {
    min-height: 100vh;
}

Solution 5 - Html

None of the above answers work for me.

What I did:

html, body {
  height: 100%;
  display: grid;
}

Solution 6 - Html

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

you must add

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

On Text Highlight Event?

JavascriptFirefox AddonDom Events

Next Solution:

Use of `inline` in F#

F#TypesInline

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRazor StormView Question on Stackoverflow
Solution 1 - HtmlMosesView Answer on Stackoverflow
Solution 2 - HtmlGuyView Answer on Stackoverflow
Solution 3 - HtmlZacharyView Answer on Stackoverflow
Solution 4 - HtmlDamian PavlicaView Answer on Stackoverflow
Solution 5 - HtmlAlexandre PivaView Answer on Stackoverflow
Solution 6 - HtmlAlina YiView Answer on Stackoverflow