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>

Scroll事件（这告诉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

因此，我过去使用的解决方案是在位置设置为相对且高度设置为100％的下面嵌套子div。（确保没有边距并且也应用了填充）。请参见下面的示例。

//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

或者，您可以在下面使用类似以下样式的内容，并且仍然可以使用，甚至可以完全删除height元素。只要子元素与父元素的高度相同，并且不会被边距或填充物遮盖，它将起作用。

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

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

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

希望这会有所帮助。

获取具有位置的元素的高度：固定

1 个答案: