http://codepen.io/abravo227/pen/MbzxBW
HTML:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<script type="text/javascript"></script>
</head>
<body>
<div class="navWrapper">
<nav id="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div><!--End of Nav-->
<a id ="home" class="smooth"></a>
<div id="page1">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<h1 class="firstTitle text-primary text-center">Hi, I'm First Last</h1>
<h3 class="subTitle text-center">The most interesting man in the world</h3>
<img src="imgage.jpg" class="firstImg center-block img-rounded img-responsive" alt="First Last Resume">
</div>
<div class="col-xs-4 linkedIn"><div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="#linkedin-info"><a class="LI-simple-link" href='www.linkedin.com'>First Last</a></div></div>
</div>
<div class="row" id="quote">
<div class="col-xs-4"></div>
<div class="col-xs-4"><blockquote><p><em>"Striving for excellence every day, in everything that I do."</em></p><footer>First Last</footer></blockquote></div>
<div class="col-xs-4"></div>
</div>
</div>
</div><!--End of Page 1-->
<a id ="about" class="smooth"></a>
<div id="page2">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 aboutMe"><i class="fa fa-commenting-o" aria-hidden="true"></i>
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
</div><!--end of page 2-->
</body>
</html>
CSS:
#nav {
position: fixed;
width: 100%;
height:50px;
text-align: center;
background-color: gray;
z-index: 1000;
}
#nav ul {
display: inline;
}
#nav li {
display: inline;
}
#nav a {
padding: 14px 16px;
display: inline-block;
color: white;
font-family: sans-serif;
}
#nav a:hover {
background-color: #0C5DA5;
}
#nav a:active {
text-decoration: underline;
color: yellow;
}
blockquote {
text-align: center;
position: relative;
}
#quote {
padding-top: 15px;
}
.linkedIn {
top: 30px;
float: right;
}
.firstTitle{
font-family: lobster, monospace;
color: blue;
}
.subTitle {
position: relative;
top: 0px;
font-family: lobster, monospace;
color: black;
font-size: 15px;
}
.firstImg {
position: relative;
width: 264px;
height: 296px;
border-color: gray;
border-width: 15px;
border-style: solid;
top: 0px;
}
#page1 {
padding-top: 40px;
height: 800px;
}
#page2 {
height: 800px;
background-color: red;
}
谁能帮我理解为什么我的第二页没有直接在导航栏下方打开，而是在其下方一点点打开？真的在这个上旋转了我的轮子，却找不到任何搜索。
提前致谢!
最佳答案
这是 div #page1 的 css:
#page1 {
padding-top: 40px;
height: 800px;
}
您需要在 #page2 上添加 padding-top: 60px; 以便您的“关于我”页面正常显示。您可以根据需要更改填充的大小。需要添加 padding 是因为当你跳转到带有 id 的页面的一部分时，你需要计算导航栏的高度。浏览器将跳转，以便您跳转的 div 与窗口顶部完全对齐。但是您的导航栏占用了 50px 的高度，这就是为什么您的部分 div #page2 被覆盖的原因。
这是我的修改:http://codepen.io/anon/pen/WoYmVq
--
或者，您可以在当前的#page2 div 之前创建一个id 为#page2 的空div，并将当前的#page2 div 更改为其他id/class。将#page2 div 的高度设置为 50px。现在当你点击“关于我”时，你会跳转到空的#page2 div，它会被你的导航栏覆盖
关于html - 单页固定导航网站的导航栏后仅打开第一页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41173098/