我正在尝试制作一个可以在 iPad 上查看的半响应式网站元素。我制作了一个最大宽度为 800px 的 html 正文。这对我的目的来说效果很好，但我在顶部还有一个带有下拉菜单的固定导航。当网站超过 800px 时，它工作正常，但如果它缩放到 800px 以下，例如在 iPad 上垂直查看时到 768 宽度，菜单栏的一部分会突出一点，而 html 的其余部分按比例缩放与视口(viewport)。
我希望补救措施很简单。我在下面包含了我的代码的一个非常简化的版本。我删除了所有下拉菜单内容，因为它应该只是必须工作的容器。
提前致谢! :)
<html>
<head>
</head>
<body>
<div id="page">
<header id="apu_top">some content<img src="images/chapter_cover_images/2x/ch5_apu@2x.png" width="100%"/>
</header>
<main>
<nav id="main_nav_bar_container">
<div id="main_nav_bar">
<div id="main_nav_top_div"> some content </div>
</div>
</nav>
</main>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
background-color: #888;
clear: both;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: "Roboto Condensed";
font-size: 13px;
line-height: 1.19em;
margin-bottom: 9px;
font-style: normal;
font-weight: normal;
text-align: left;
hyphens: auto;
}
#page {
max-width: 800px;
margin: 0 auto;
position: relative;
background-color: #FFFFFF;
}
#main_nav_bar_container {
width: 100%;
position: fixed;
max-width: 800px;
top: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1000;
}
#main_nav_bar {
background-color: #2580B9;
color: #F3A51D;
font-size: 1em;
height: 38px;
width: 100%;
vertical-align: middle;
}
#main_nav_top_div {
z-index: 10000;
margin-left: 4%;
}
最佳答案
好的，所以在您的屏幕截图中，我想我看到了 8px 主体和左右两侧的默认边距。
所以您可以做的是添加 100% 减去 2 * 8px 的宽度计算。 保持最大宽度，使其永远不会超过 800 像素。
#main_nav_bar_container {
width: calc(100% - 16px);
position: fixed;
max-width: 800px;
top: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
z-index: 1000;
}
或者代替宽度计算，您可以使用 left: 8px; 和 right: 8px; :)
关于html - 可调整大小的固定顶部导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52283540/