0

How to solve height:100% issue in internet explorer

Solution 1

Use viewport height (vh) instead of percentages.

height: 100vh;

---

Solution 2

For an element to have height:100%; in IE, all parent elements must have height:100%;. Any break in the "chain" will cause IE to make its height: 0 and the element disappears. Give the following css a try.

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

.parent1 { height: 100%; }

.parent2 { height: 100%; }

.element1 { height: 100%; }

---

---

---