获取位置为固定的元素的高度

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 并取消勾选位置：固定；然后我得到正确的高度

有任何想法吗？

Answer 1

所以我过去使用的解决方案是在下面嵌套一个子 div，位置设置为相对，高度设置为 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，而是访问第一个子项的 offsetHeight。

firstChild.offsetHeight

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

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

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

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

希望这可以帮助。