javascript - 获取位置为 :fixed 的元素的高度

Question

我试图在运行时获取元素的高度。我有一个导航栏，当我向下滚动时它会固定。我想将容器的填充设置为等于导航栏的高度(固定时)。问题是，一旦我将位置设置为固定，offsetHeight 就会变为 0。我可以使用子元素的 offsetHeight 并包括边距/填充来获取高度，但我正在寻找一种更简洁的方法。

这使用 Angular 来添加/删除类。

<div class="nav-container" id="nvbr" (dblclick)="getHeight()">
  <app-navbar [fixed]="_fixed"></app-navbar>
</div>
<div [style.padding-top.px]="_fixed ? _navHeight : 0">
   <router-outlet></router-outlet>
</div>

滚动事件(这告诉 Angular 将我的固定类添加到元素):

if (window.pageYOffset > 55) {
        if (this._fixed === false)
            this._fixed = true
    }
    else {
        if (this._fixed === true)
            this._fixed = false
    }//else

获取高度:

getHeight() {
    let navEl =   document.getElementById("nvbr")
    console.log(navEl, navEl.offsetHeight)
}

如果我进入 chrome 并取消勾选 position:fixed;然后我得到正确的高度

有什么想法吗？

Answer 1

所以我过去使用的解决方案是在下面嵌套一个子 div，位置设置为 relative，高度设置为 100%。 (确保也没有应用边距和填充)。请参见下面的示例。

//css
.nav-container {
  position: fixed;
  height: 65px;
  padding: 0;
}

.nav-container-first-child{
  position: relative;
  height: 100%;
  margin: 0;
}

//html
<div class="nav-container" id="nvbr" (dblclick)="getHeight()">
  <div class="nav-container-first-child">
    <app-navbar [fixed]="_fixed"></app-navbar>
  </div>
</div>

//javascript
getHeight() {
    let navEl =   document.getElementById("nvbr")
    console.log(navEl.offsetHeight) //displays 0
    console.log(navEl.firstChild.offsetHeight) //displays 65
}

不是访问 offsetHeight，而是访问第一个 child 的 offsetHeight。

firstChild.offsetHeight

或者，您可以使用类似下面的样式，它仍然有效，或者您甚至可以完全删除高度元素。只要子元素与父元素的高度相同并且没有被边距或填充遮挡，它就可以工作。

//css
.nav-container {
  position: fixed;
  padding: 0;
}

.nav-container-first-child{
  position: relative;
  height: 65px;
  margin: 0;
}

我记得我经常使用这样的设置来为移动设备页面设置页眉和内容容器。

希望这对您有所帮助。