设置一个元素的最高值等于导航栏的高度

Question

我正在使用Bootstrap并具有以下代码：

<nav class="navbar">
...
</nav>

<div class="progress-bar">
...
</div>

我想将.progress-bar的最高值设置为等于navbar的高度。我该如何实现？

Answer 1

var navbarHeight = $('.navbar').height();
var progressBar = $('.progress-bar');
progressBar.css("top", navbarHeight);

.container {
  position: relative;
}

.navbar {
  height: 500px;
  background: yellow;
}

.progress-bar {
  width: 100%;
  height: 500px;
  position: absolute;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <nav class="navbar">
    ...
  </nav>

  <div class="progress-bar">
    ...
  </div>
</div>