包含固定导航栏“边距错误”的 100% 高度的正文
[英]Body with 100% height containting fixed Navbar “Margin Error”
问题描述
我正在尝试在 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>
2 个解决方案
解决方案1
2 已采纳
这是由于 HTML 和 HTML5（引导程序）的冲突而发生的。 我得到了错误兄弟。 我建议您在 html 文件的顶部使用<!DOCTYPE HTML> ，这将 100% 解决您的问题。
解决方案2
1 2020-08-24 02:43:52
菜单设置为display: none当屏幕低于910px
如果您不希望菜单在移动设备上消失，请删除此 CSS：
@media only screen and (max-width: 909px)
.topnav a:not(:first-child) {
display: none;
}
具有自定义指针固定高度的导航栏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.