How to solve height:100% issue in internet explorer

Solu­tion 1

Use view­port height (vh) instead of percentages.

height: 100vh;

Solu­tion 2

For an ele­ment to have height:100%; in IE, all par­ent ele­ments must have height:100%;. Any break in the “chain” will cause IE to make its height: 0 and the ele­ment disappears.

Give the fol­low­ing css a try.

html, body { width: 100%; height: 100%; }

.parent1 { height: 100%; }

.parent2 { height: 100%; }

.element1 { height: 100%; }


You may also like...