min-height does not work with body

Question

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)

score 83 · Accepted Answer · edited Jan 09 '16 at 19:05

83

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%}

edited Jan 09 '16 at 19:05

Andrew

18,680
13
103
118

answered Sep 18 '10 at 07:11

Moses

9,033
5
44
67

7

Awesome that worked, a follow up question: I have now set body to be min-height: 100%. Now I have another div inside body, and I want that to also be min-height:100%;, I did that but it isn't working. – Razor Storm Sep 18 '10 at 07:21
I'm honestly not sure about the best way to accomplish that in a cross-browser compliant way. – Moses Sep 18 '10 at 08:20
2

adding min-height to body does not work, even with html min-height 100% – chovy Oct 11 '12 at 04:43
2

@chovy You misread my answer as saying you only need `min-height`. In my example, I said `html {height:100%} body {min-height:100%}`. That should work, and it certainly did for Razor who accepted it. – Moses Oct 11 '12 at 16:10
1

this works, but then i get extra vertical scrolling. Beyond the height of the window. – chovy Oct 13 '12 at 06:03
@chovy without access to your css, I have no way of knowing how. perhaps extra padding? – Moses Oct 13 '12 at 06:58
2

No need to look. It's margin, padding or border. Look into [box-sizing: border-box](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) – Stijn de Witt Mar 08 '14 at 14:13

score 27 · Answer 2 · answered Feb 16 '18 at 03:47

27

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

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

body {
    flex: 1;
}

answered Feb 16 '18 at 03:47

Guy

12,488
16
79
119

unlike all the other answers on SO, this actually worked for next cases: 1) allow a div to be 100% of a body if there's free space. 2) doesn't limit body size to viewport size if there's a scroll. But how crossbrowser is it? – You Care Aug 17 '20 at 17:56
It seems min-height is widely supported (IE7 and higher, all mobile browsers) https://caniuse.com/#feat=minmaxwh, flex-box will need IE10 and above: https://caniuse.com/#feat=flexbox. You could potentially polyfill display:flex for IE8+ with scripts such as: https://github.com/jonathantneal/flexibility or perhaps with postCSS. – Guy Aug 17 '20 at 20:47

score 10 · Answer 3 · answered Sep 18 '10 at 07:14

10

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

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

answered Sep 18 '10 at 07:14

Zachary

6,522
22
34

This is so true and your advice was the only thing that worked to me! thanks! – Fillype Farias Nov 07 '17 at 13:14

Damjan Pavlica · Answer 4 · 2020-05-12T11:10:15.010

6

I solved the problem with just:

body {
    min-height: 100vh;
}

edited May 12 '20 at 11:10

answered Sep 25 '18 at 08:03

Damjan Pavlica

31,277
10
71
76

I used: html, body { min-height: 100vh; } – Douglas Ianitsky Feb 12 '19 at 14:16

score 3 · Answer 5 · answered Sep 08 '20 at 14:25

3

None of the above answers work for me.

What I did:

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

answered Sep 08 '20 at 14:25

Alexandre Piva

91
1
4

score 0 · Answer 6 · edited Jun 24 '16 at 02:57

0

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

you must add

edited Jun 24 '16 at 02:57

Mike Ross

2,942
5
49
101

answered Jun 24 '16 at 02:13

Alina Yi

1

min-height does not work with body

6 Answers6

Linked