css 取得父元素的高

CSS 中取得父元素高度的方法有很多种，可以使用伪元素、flex 布局以及 JavaScript 等多种方式。下面将分别介绍这些方法。

/* 1. 伪元素 */.parent {
      position: relative;
}
.parent::before {
      content: "";
      display: block;
      height: 100%;
}
.child {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
}
/* 2. flex 布局 */.parent {
      display: flex;
      flex-direction: column;
}
.child {
      flex: 1;
}
    /* 3. JavaScript */const parent = document.querySelector(".parent");
    const height = window.getComputedStyle(parent).height;
    console.log(height);
    

第一种方法是使用伪元素，在父元素的 before 伪元素中设置高度为 100%，然后在子元素中使用绝对定位，使其 top 和 bottom 均为 0。这样，子元素就会继承父元素高度。

第二种方法是使用 flex 布局。将父元素的 display 属性设置为 flex，并将 flex-direction 属性设置为 column，表示子元素竖排。然后，在子元素中设置 flex 属性为 1，表示平分父元素的高度。

第三种方法是使用 JavaScript。使用 window.getComputedStyle 方法获取父元素的计算样式，然后取得父元素的高度即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！