我正在尝试在每个页面上实现一个固定在顶部的导航栏。但是，每当页面向下滚动时，页面的主体部分都会保持重叠。我没有使用bootstrap。我试图使用AngularJS，并尝试使用index.html的部分（使用ng-view插入）。这是我的代码：
的index.html：
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Portal</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='css/dashboard.css'>
<link rel="stylesheet" href="../bower_components/html5-boilerplate/dist/css/normalize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="../bower_components/html5-boilerplate/dist/css/main.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class='navbar'>
<ul>
<li id='floatleft'><a href="/">Dashboard</a></li>
<li id='floatleft'><a href="/grades">Grades</a></li>
<li id='floatleft'><a href="/classes">Classes</a></li>
<li id='floatright'><a href="/logout"><i class='material-icons'>power_settings_new</i></a></li>
<li id='floatright'><a href="/profile"><i class='material-icons'>person</i></a></li>
<li id='floatright'><a href="/msgs"><i class='material-icons'>mail</i></a></li>
</ul>
</nav>
<!--Here is where the other pages will be inserted-->
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="../bower_components/angular/angular.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
<script src="../bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
dashboard.html：
<div>
<span class='classmod'>
<ul>
<h1>Social Studies</h1>
<li ng-repeat="announcement in announcements">{{announcement}}</li>
<li>03/15: Second Midterm coming up</li>
<li>03/10: <a href="hw5">Homework 5 due</a></li>
</ul>
</span>
<span class='classmod'>
<ul>
<h1>Algebra II</h1>
<li ng-repeat="announcement in announcements">{{announcement}}</li>
<li>03/15: Second Midterm coming up</li>
<li>03/10: <a href="hw5">Homework 5 due</a></li>
</ul>
</span>
<span class='classmod'>
<ul>
<h1>History</h1>
<li ng-repeat="announcement in announcements">{{announcement}}</li>
<li>03/15: Second Midterm coming up</li>
<li>03/10: <a href="hw5">Homework 5 due</a></li>
</ul>
</span>
</div>
dashboard.css：
body {
/* prevents navbar from covering content at top of page */
padding-top: 45px;
background-color: ghostwhite;
}
.view-container {
overflow: auto;
height: 100%;
}
.navbar {
font-family: Arial, sans-serif;
font-size: .9em;
background-color: #eee;
margin-top: 45px;
}
.navbar ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: lightslategray;
position: fixed;
top: 0;
width: 100%;
height: 45px;
}
#floatleft a {
float: left;
padding: 13px 16px;
}
#floatright a {
float: right;
padding: 11px 10px;
}
.navbar a {
display: block;
text-decoration: none;
cursor: pointer;
text-align: center;
background-color:lightslategray;
color: white;
}
.navbar a:hover {
background-color: darkslategrey;
}
.active {
}
.classmod {
background-color: grey;
position: relative;
width: 50%;
float: left;
}
.classmod li {
list-style-type: none;
}
我试图填充身体，以便身体内容显示在导航栏下方而不重叠，并且在初始页面加载时，身体内容位于导航栏下方。向上滚动后，正文内容会直接在导航栏上移动（如果您调整窗口大小，可以看到此内容，直到您可以向上滚动）。
（另外，请忽略身体内容中丑陋的灰色方块，我试图为每个班级创建小方块模块，但尚未确定那个部分。）
修改 我可能通过更改css代码来修复它：
body, html {
background-color: ghostwhite;
/* prevents body content from overflowing into navbar */
height: 100%;
overflow: hidden;
}
.view-container {
/* prevents body content from overflowing into navbar */
overflow: auto;
height: 100%;
padding: 0;
}
删除填充，添加高度：100％并溢出：隐藏到html标记以及body标记。不完全确定原因，但现在身体并没有溢出导航栏......