固定位置导航栏/标题有效，但内容不会在标题下滚动答案

【问题标题】：Fixed position navbar/header works but content won't scroll under header固定位置导航栏/标题有效，但内容不会在标题下滚动
【发布时间】：2015-02-04 17:15:05
【问题描述】：

嗨，当用户向下滚动时，我正在努力将主要内容放在固定标题下方。

当用户向下滚动时，主体不会位于标题下方... 主体只是向上移动到固定的头部......并覆盖它！而不是它从固定标题后面的视图中消失。

我找了很多例子..它们很有帮助，但没有解释为什么主要内容没有消失在固定标题后面...只是向上移动覆盖标题。

我已经尝试添加：

position: relative;

但它使主要内容消失了。

谢谢。

更新的新代码：

index.html

<html ng-app="financeApp">
  <head>
    <meta charset="utf-8">
    <!-- CSS -->



 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />


</head>

<body>



  <!-- HEADER AND NAVBAR -->
  <header>





   <div class="wrap">
      <!-- logo -->

   <!--    <a href="#!"><img class="logo" src="img/history_00.png" /></a>
  <h7>Building lasting relationships<h7>-->



<ng-controller = "demoCtrl">

<ul class="nav nav-pills pull-left">



      <li ng-class="{active: isState('home') }">
        <a ui-sref="home">HOME</a>
      </li>
      <li ng-class="{active: isState('form') }">
        <a ui-sref="form">ABOUT US</a>



<li ng-class="{active: isState('form') }">
          <a href="#candidates">CANDIDATES</a>

</li>

       <li ng-class="{active: isState('jobs') }">
        <a ui-sref="jobs">JOBS</a>
      </li>
       <li ng-class="{active: isState('joinus') }">
       <a ui-sref="joinus">JOIN US</a>
      </li>


  <li ng-class="{active: isState('contact') }">
        <a ui-sref="contact">CONTACT US</a>
      </li>
    </ul>
    <h3 class="text-muted">          </h3>
    <br>
</div>
</header>







<!--<div class="full-background">-->
<div ui-view class="main"></div>





<!--</div>
</div>-->


<!-- Loading the Footer -->
  <div id="footer" ng-include="'partials/footer.html'"></div>

</body>
</html>


   <!-- App JS -->

这更多的是 style.css：

 header {
  height:10px;
position: fixed;
width:100%;
height:75px;
margin-top:30px;
margin-bottom: 50px;
}

header .nav {
 /* float:center;*/
margin: 10px auto 0;
/*position: fixed;*/
/*z-index:1;*/
background: #0783A9;

}
.nav {

  background-color:#0783A9 ;
  color: white;
/* float:center;*/

}
.nav>li>a {
  color: white;
}
.nav-pills>li>a:hover {
  color: white;
  background: transparent;
  cursor: pointer;
  background: #cecece;
}

【问题讨论】：

可能只是定位/z-index 问题。您能否向我们提供您的 HTML 的精简版本和相应的样式？另外，这和角度有什么关系？

标签： html css angularjs

【解决方案1】：

你说

我正在努力将主要内容放在固定标题下方用户向下滚动。

但是 CSS：

header .nav {
float:center; /* not a valid setting for float BTW */
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
position: fixed;
z-index:10;
}

表示nav元素是固定的，不是标头。

header{
position: fixed;
}

header .nav {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
}

可能是你想要的，但没有演示很难 100% 确定。

【讨论】：

我添加了位置：固定；到标题...但它只会使标题消失？
您必须为标题设置位置和尺寸。见-jsfiddle.net/L6go1o8m
谢谢，但它只是让主体在用户向下滚动时位于标题顶部？
不在小提琴中它没有。如果您对现有代码进行基本演示，我们可以更进一步......目前我们正在黑暗中工作。
很难做一个 jsfiddle，因为我正在使用具有许多不同视图和外部文件的 angularjs 应用程序。我尝试在 jsfiddle 上制作我的网站的简化版本，但它无法正常运行。我已经编辑了上面的内容以显示更多可能导致它无法正常工作的代码？谢谢。

【解决方案2】：

首先float: centre; 在 CSS 中不存在。

我建议使用以下内容来使您的菜单居中。只是因为如果用户的屏幕比您的屏幕大或小，那么它不会显示在他们的中心。

header .nav {
    background: #0783A9;
    margin: 10px auto 0;
    width: 100%;
}

为.nav 添加背景颜色将停止显示您的内容，因为它目前是透明的。

【讨论】：