将 div 相对（绝对）定位到固定导航栏

Question

我的页面顶部有一个fixed 导航栏，并且想要在其下方放置一个元素，相对于导航栏的大小。调整浏览器窗口大小时，我的导航栏会从 1 行跳到 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 替代方案来做到这一点（可能包括我不知道的引导类），请告诉我。

Answer 2

如果你想把 div 放在固定元素的下面，你可以通过将它的上边距设置为导航栏的高度来做到这一点。

但是，在您的情况下，因为您没有固定高度，所以并不是那么简单。您需要使用 javascript 来实现这一点。

最简单的方法是使用 jQuery，如果我是对的，你已经加载了它，因为你使用的是引导程序。试试这样：

$(document).ready(function() {
    $('.articles-showcase').css('top', $('.header').outerHeight());
});

另外，我也不是很清楚。 .articles-showcase 和 ul 在标题 div 下。如果您想将 .articles-showcase 放在 ul 下，请执行以下操作：

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

不用 jQuery 也可以，但使用 jQuery 是最简单的方法。 希望对您有所帮助。