html - 将 div 相对(绝对)定位到固定的导航栏

Question

我的页面顶部有一个 fixed 导航栏，我想根据导航栏的大小在其下方放置一个元素。调整浏览器窗口大小时，我的导航栏会从一行跳到 2 或 3 行，我希望我的 div (.articles-showcase) 相应地移动。

我尝试通过将我的 div 嵌套在导航栏容器中并使用 position: absolute;、top: 0; 来实现这一点，但这总是将我的 div 定位在页面顶部。

有没有办法使用 css 来做到这一点，还是我应该寻找 javascript 解决方案？

我目前正在使用 bootstrap 和 angular JS，如果没有必要，我不想将 jQuery 添加到我的元素中。

这是我的 html:

<div class="header" ng-controller="NavbarController">
  <ul>
    <li ng-class="{ active: isActive('/PTC-Testers') }"><a href="#/PTC-Testers">PTC-Testers</a></li><li ng-class="{ active: isActive('/articles') }"><a href="#/articles">articles</a></li><li ng-class="{ active: isActive('/sites') }"><a href="#/sites">PTC sites</a></li><li ng-class="{ active: isActive('/account_reviews') }"><a href="#/account_reviews">account reviews</a></li><li ng-class="{ active: isActive('/forum') }"><a href="#/forum">forum</a></li><li ng-class="{ active: isActive('/contact') }"><a href="#/contact">contact us</a></li><li ng-class="{ active: isActive('/login') }"><a href="#/login">login</a></li>
  </ul>

  <div class="articles-showcase">
    <div class="col-xs-6 col-md-3">
      <p>featured</p>
      <h1>What I learned while cooking</h1>
      <h3>author | posted </h3>
    </div>
    <div class="col-xs-6 col-md-3">
      <p>most read</p>
      <h1>My favorite things about dogs</h1>
      <h3>author | posted </h3>
    </div>
    <div class="col-xs-6 col-md-3">
      <p>highest rating</p>
      <h1>It's finally friday people!</h1>
      <h3>author | posted </h3>
    </div>
    <div class="col-xs-6 col-md-3">
      <p>featured track</p>
      <h1>starting your own adventure</h1>
      <h3>author | posted </h3>
    </div>
  </div>

</div>

我的 CSS 的相关部分:

.header {
  background-color: red;
  color: #fff;
  border-bottom: 0.3em solid cyan;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
}
.header ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.header ul li {
  display: inline-block;
}
.header ul li a {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  color: #fff;
  padding: 5px 1em;
  margin: 0;
  display: inline-block;
  text-decoration: none;
  outline: none;
}
.header ul li:hover {
  background-color: #ff6666;
  text-decoration: none;
}
.header ul .active {
  background-color: cyan;
}

.articles-showcase {
  position: absolute;
  top: 0;
  z-index: 11;
  border-bottom: 0.2em solid cyan;
  padding: 0.5em;
  width: 100%;
}
.articles-showcase div {
  text-align: center;
}
.articles-showcase div h1, .articles-showcase div h3, .articles-showcase div p {
  margin: 0;
  padding: 0.3em;
  color: #660000;
}
.articles-showcase div p {
  font-size: 1.2em;
  color: red;
}
.articles-showcase div h1 {
  font-size: 1.7em;
}
.articles-showcase div h3 {
  font-size: 1.4em;
}

Answer 1

基于@Milos Miskone Sretin 的回答，我想出了这个粗略的 jQuery 解决方案:

$(window).resize(function() {
        $('.articles-showcase').css('top', $('.header ul').outerHeight());
    });

我仍然需要在不同的浏览器和移动设备上对此进行测试，但就目前而言，它似乎可以解决问题。

如果有人能想出一个 css 替代方案来执行此操作(可能包括我不知道的 Bootstrap 类)，请告诉我。