clientHeight is not working in IE - html

Question

I have a parent and child element and sets the parent element height as 100%.
When i check the child element height it show some value in chrome browser.
But in IE browser it shown as 0. what i made wrong and how can i get the height value.
<div id='parent'>
<div id="child"></div>
</div>
/* Styles go here */
#parent{
height: 100%;
min-height:100%;
min-width:100%;
background-color:red;
display:grid;
display: -ms-grid;
align-items:stretch;
position:relative;
}
i have used clientHeight to find the element height.
document.getElementById(''child").clientHeight
Sample Link https://jsfiddle.net/zc39px72/

Answer 1

You need to specify how the grid will act and repeat, cause you are using grid to make the child element to get the full width and height of its container.Also you need to get the element heigh by using offsetHeight (or width using offsetWidth).
Check the following snippet:
var child = document.getElementById('child');
child.innerHTML = 'My height is: ' + child.offsetHeight;
html, body {
height: 100%;
margin: 0;
}
#parent{
height: 100%;
min-height:100%;
min-width:100%;
background-color: red;
display: grid;
display: -ms-grid;
align-items: stretch;
position: relative;
-ms-grid-columns: 1fr;
grid-template-columns: repeat( 1, 1fr );
-ms-grid-rows: 100%;
grid-template-rows: repeat( 1, 100% );
}
<div id="parent">
<div id="child"></div>
</div>