时间戳

首页 > 解决方案 > 100% 高度的正文包含固定的导航栏“边距错误”

javascript - 100% 高度的正文包含固定的导航栏“边距错误”

问题描述

我正在尝试在 100% 高度的主体中添加一个粘性响应式导航栏，但是每当我尝试检查移动屏幕尺寸时，导航栏就会被边缘化到右侧。

此外，当我在其中包含 Bootstrap 的页面中尝试相同的代码时，NavBar 中的填充和边距变得不平衡（也许 Bootstrap 使用 HTML5 ）。

这是我的 CSS 和 HTML 代码。第一个是 CSS，最后一个是带有 Javascript 的 HTML。

/* Navbar css */
.MainBody {
    padding-top: 0px;
    text-align: center;
    background: linear-gradient(rgb(240, 251, 255), rgb(168, 203, 255));
    background-attachment: fixed;
    height: 1000px;
    padding: 0px;
}

.topnav {
  overflow: hidden;
  background-color: #020f3b;
  position: fixed;
  /* Safari */
  width: 100%;
  top: 0;
  z-index: 1;
}

.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  padding: 11px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #a3dcff;
  color: black;
}

.topnav a.active {
  background-color: #0099ff;
  color: white;
}

.topnav .icon {
  display: none;
}

@media only screen and (max-width: 909px) {
  .topnav a:not(:first-child) {
      display: none;
  }
  .topnav a.icon {
      background: rgb(0, 73, 146);
      float: right;
      display: block;
  }

}

@media only screen and (max-width: 909px) {
  .topnav .responsive {
      position: fixed;
  }
  .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }
  .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
  }
}

/* Navbar Css <:: */
<body class="MainBody">
<div class="topnav" id="myTopnav">
    <a href="https://apps.webmatrices.com/adsense-eligibility-checker" class="active">AEC Tool</a>
    <a href="https://webmatrices.com/sponsor-adsense-eligibility-checker/" target='_blank'>Sponsor or Buy AEC</a>
    <a href="https://webmatrices.com/" target='_blank'>Webmatrices</a>
    <a href="https://blog.webmatrices.com/" target='_blank'>Our Blog</a>
    <a href="https://facebook.com/webmatrices" target='_blank'>Facebook Page</a>
    <a href="https://facebook.com/iambishwas" target='_blank'>Creator's Facebook</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
    <!-- Navbar script ::> -->
    <script>
        function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
        }
    </script>
    <!-- Navbar script <:: -->
    <!-- Navbar Bar | nv <:: -->
</div>
</body>

标签： javascripthtmlcsstwitter-bootstrap

解决方案

这是由于 HTML 和 HTML5（引导程序）的冲突而发生的。我得到了错误兄弟。我建议您<!DOCTYPE HTML>在 html 文件的顶部使用，这将 100% 解决您的问题。

推荐阅读