Menu
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)
454
The difference between height and min-height is that height defines a value for the height and that's how tall the element will be. min-height says that the minimum height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever).
If set relatively, element's height will be relative to the height of the parent — if set. If the height of parent is not set — the height of the element will stay auto (like: 50% from auto is auto). That is why relative values of height usually don't work — because certain conditions must be met beforehand.
If you check the computed style values in dev tools, the body element has a height of zero. Meanwhile, the HTML element has a height equal to the visible part of the page in the browser. The body element has a default 8px margin indicated by the bar on top.
The CSS min-height property applies to block level and replaced elements. The CSS min-height property is used to prevent the CSS height from becoming smaller than the value specified in the CSS min-height property. When the value is provided as a percentage, it is relative to the height of the containing block.
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%} This worked for chrome 64 without setting a hard-coded height:
html { min-height: 100%; display: flex; } body { flex: 1; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
