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的anwser，我想出了这个粗糙的jQuery解决方案：

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

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

如果有人能想出一个css替代方法来做这件事（也许包括我不知道的引导课程），请告诉我。

Answer 2

如果你想将div放在固定元素下面，可以通过将其上边距设置为导航栏的高度来实现。

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

最简单的方法是使用jQuery，如果我是对的，你已经加载了它，因为你使用的是bootstrap。试试这种方式：

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

另外，我还不完全清楚。在标题div下是.articles-showcase和ul。如果你想在ul下放置.articles-showcase，请执行以下操作：

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

你可以在没有jQuery的情况下完成它，但使用jQuery是最简单的方法。希望这可以帮到你。

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

2 个答案: