我如何计算动态元素的高度？

8 浏览
0 Comments

我如何计算动态元素的高度？

这是我的代码：

.parent{
  position: fixed;
  border: 1px solid;
  height:  40%;
  width: 300px;
  max-height: 200px;
}
.first_child{
  border: 1px solid blue;
  padding: 10px;
  height: 20px;
  text-align: center;
}
.second_child{
  border: 1px solid red;
  height: 100%;
  overflow-y: scroll;
}

  title
    onetwothreefourfivesixseveneightnightten

如你所见，.second_child超出了parent的范围。我想将它保持在.parent元素内。我该如何做到呢？

换句话说，我想实现这样的效果：

.second_child{
  height: 100% - 40px;    
              /* 40px: .first_child的高度20px + .first_child的padding上下各10px */ 
  ...
}

注意：我不想使用calc()或者box-sizing: border-box;，因为它们在旧浏览器如IE7中不被支持。所以我在寻找第三种方法。

0

1 答案

0 Comments

问题出现的原因是需要计算动态元素的高度。解决方法是使用CSS样式和JavaScript来计算元素的高度。

在给定的代码中，父元素的高度被设置为100%，宽度为300像素，并且有最大高度为200像素和最小高度为100像素的限制。第一个子元素具有蓝色边框，高度为20像素，居中对齐。第二个子元素具有红色边框，垂直滚动条，并且通过绝对定位来将其置于父元素的顶部40像素位置。这个子元素包含一些文本内容。

为了计算动态元素的高度，可以通过JavaScript使用DOM操作来获取元素的高度属性。以下是解决方法的步骤：

1. 使用JavaScript的`getElementByClassName`方法获取父元素的引用。

2. 使用`clientHeight`属性获取父元素的高度。

3. 将获取到的高度值保存到变量中，以便后续使用。

下面是使用JavaScript计算动态元素高度的代码：

var parentElement = document.getElementsByClassName('parent')[0];
var parentHeight = parentElement.clientHeight;
console.log(parentHeight);

通过上述代码，可以获取到父元素的高度，并将其打印到控制台中。

这样，我们就可以通过CSS样式和JavaScript来计算动态元素的高度了。

0