高度为100％的实体包含固定的导航栏“页边距错误”

如何解决高度为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>

解决方法

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

当屏幕位于display: none下方时，菜单设置为910px

如果您不希望菜单在移动设备上消失，请删除此CSS：

@media only screen and (max-width: 909px)
.topnav a:not(:first-child) {
    display: none;
}

高度为100％的实体包含固定的导航栏“页边距错误”

如何解决高度为100％的实体包含固定的导航栏“页边距错误”

解决方法

相关推荐