clientHeight无法在IE中运行

Question

我有一个父元素和子元素，并将父元素高度设置为100％。当我检查子元素高度时，它在chrome浏览器中显示一些值。但在IE浏览器中它显示为0.我做错了什么，我怎么能得到高度值。

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

我用clientHeight找到元素高度。的document.getElementById（ '' 子“）。clientHeight

示例链接https://jsfiddle.net/zc39px72/

Answer 1

您需要指定网格的行为和重复方式，因为您使用网格使子元素获得其容器的整个宽度和高度。还需要使用offsetHeight（或宽度使用offsetWidth）获得元素高度。

请查看以下代码段：

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>