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

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

检查以下代码段：

＆＃13;

offsetWidth

＆＃13;

var child = document.getElementById('child');
child.innerHTML = 'My height is: ' + child.offsetHeight;

＆＃13;

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

＆＃13;

clientHeight无法在IE中运行

1 个答案: