页面内容由导航栏覆盖

我在页面顶部有一个位置固定的导航栏，但我想在下面显示的内容最终被导航栏部分覆盖。

问题屏幕截图

这是html:

<html>
<head>
  <title>A Plus Graphing</title>
  <link rel="stylesheet"
        type="text/css"
        href="index.css"/>
</head>
<body>
<div id="all">
  <div id="header">
    <div class="header_container">
      <h1 class="heading"><b class="a_main">A+</b> Graphing</h1>
      <ul id="top_nav">
        <li class="nav_item"><a href="ourmission.html">Our Mission</a></li>
        <li class="nav_item"><a href="about.html">About</a></li>
        <li class="nav_item"><a href="contact.html">Contact</a></li>
        <li class="rfloat"><a href="register_main.html">Sign Up</a></li>
      </ul>

    </div>
  </div>
  <div id="content">
    <div class="global_container">
      <b class="welcome">Welcome to <b class="a">A+</b> Graphing!</b>
      <div class="login_links">
        <a class="login_button" href="teacher_login.html">Teacher Login</a> <a class="login_button" href="student_login.html">Student Login</a>
      </div>
      <p class="intro_p">A+ Graphing is designed to introduce technology in the classroom and cut down teacher grading time.<br/>
        <a href="about.html">Learn More</a></p>
    </div>
  </div>
  <div class="footer_container">
    A Harsh Mehta and Kevin Turner Production
    <div id="donate_main">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
    ">
        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      </form>
    </div>
  </div>
</div>
</body>
</html>

和css：`

#header {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    display: block;
    background-color: #F2EEEE;
    height: 51px;
    width: 100%;
}
body {
    font-family: arial, sans-serif;
    height: 100%;
}
#all {
 height: 100%;
}
body a {
    color: red;
}
html {
height: 100%;
}
.a_main {
    color: red;
}
.heading {
    font-size: 20px;
    float: left;
}
.header_container {
    margin-left: auto;
    margin-right: auto;
   width: 700px;
    height: 51px;
}

.header_teacher {
    margin-left: auto;
    margin-right: auto;
   width: 1200px;
    height: 51px;
}
body ul {
    list-style-type: none;
    float: left;
}
#top_nav a {
text-decoration: none;
color: black;

}
#top_nav a:hover {
    text-decoration: none;
    border-bottom: 5px solid red;
}
#top_nav li {
   display: block;
    float: left;
    margin-left: 50px;
}
#content {
    margin-top: 100px;
}
#content {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 0;
    width: 400px;
    min-height: 100px;
}
.global_container {
 position: absolute;
}
.welcome {
    font-size: 30px;
}
.a {
    color: red;
}

.login_button {
    background-color: red;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
}
.intro_p {
    margin-top: 60px;
    margin-bottom: 300px;
}

#donate_main {
    float: right;
}

.login {
}

#info_container {
    margin-bottom: 350px;
}
.login_links {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 20px;
    width: 300px;
}
.footer_container {
margin-left: auto;
color:  grey;
border-top: 1px solid grey;
padding-top: 10px;
font-size: 15px;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 20px;
    width: 700px;
}

.login_container {
    margin-top: 50px;
    border: 1px solid grey;
    border-radius: 15px;
     box-shadow: 5px 5px 5px 5px #888;
    width: 450px;
    margin-left:  -5em;
   margin-bottom: 350px;
   padding: 20px 50px 50px 30px;
}
.login_class {
 border-bottom: 1px solid grey;   
}
.username {
    width: 300px;
    height: 20px;
}
.password {
     width: 300px;
    height: 20px;
}
.username2 {
    width: 300px;
    height: 30px;
}
.password2 {
     width: 300px;
    height: 30px;
}
.inline_info1 {
    float: left;
    width: 200px;
}
inline_info {
    float: left;  
}
.apple{
    margin-top: 20px;
}
.student {
    margin-top: 30px;
}
#register_content {
margin-bottom: 200px;
}
.main_inner {
    margin-bottom: 300px;
}
.test_make {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: 400px;
}
.list_item {
    display: inline-block;
    margin-right: 250px;
    width: 150px;
}

#quizes_main_list {
    width: 90%;
}
.inner_list{
   width: 100%;
}
.greeting_head {
    width: 100%;
  text-align: center;
}
.view_quiz {
    color: white;
    background-color: red;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 15px;
}
#quizes_main_list a {
    text-decoration: none;
}
.quiz_item {
    margin-bottom: 50px;
}
.tests {
    margin-top: 100px;
}
.tests a{
    text-decoration: none;
}
.quiz_main {
    margin-top: 200px;
}
#main {
    border: 1px solid grey;
    padding-bottom: 25px;
    padding-top: 25px;
    padding-left: 100px;
    padding-right: 100px;
    border-radius: 15px;
      box-shadow: 5px 5px 5px 5px #888;
}
.results_main {
    margin-top: 100px;
}

.score {
    font-size: 50px;
}
.results_green {
    color: green;
    font-size: 60px;
}
#question_stat {
    float: left;
}
#grades_main_list {
    margin-top: 50px;
    width: 90%;
}
.link_nav {
    margin-top: 100px;
}
.link_inner {
color: white;
background-color: red;
border-radius: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
.global_content a{
    text-decoration: none;
}
.inner_list {
    margin-bottom: 30px;
    border-bottom: 1px solid grey;
    padding-bottom: 20px;
}
.quiz_item {
    width: 100%;
}
.inline_info a{
    color: white;
}
.inline_info1 a{
    color: white;
}`

提前感谢您的帮助。

您已获得前0的利润

这是您的代码。只需删除空白顶部的行：0；

#content {
    margin-top: 100px;
}
#content {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 0;  //remove this line
    width: 400px;
    min-height: 100px;
}

我搜索了您的代码，试图找到导致这种情况的原因。由于您浮动了您的头，我想我可以使用clear:both;来修复它，但没有成功。

目前，添加margin-top:50px;就可以了。

#content{
  margin-top:50px;
}

我还在你的标题中添加了z-index:10，这样它就会出现在你所有内容的前面。我觉得它看起来更好；）

#header{
  z-index:10;
}

JSFIDDLE

我也遇到了同样的问题。记不起我最终在哪里看到了答案，但我通过转到情节提要并选择有问题的视图控制器，然后选择属性检查器来修复它。在"视图控制器"部分下，找到"延伸边"，然后根据需要取消选择"顶杆下"或"底杆下"。不知道为什么默认情况下不取消选择这些选项。

我遇到了同样的问题，并修复了它。尝试通过添加以下内容将导航栏的下边距更改为零。

.nav_bar {
 margin-bottom: 0px;
}

然后添加另一个类来处理溢出

.clearfix::after{
 content: "";
 clear: both;
 display: table;
}

这应该能胜任工作。

相关内容

最新更新

热门标签：