时间戳

首页 > 解决方案 > 可调整大小的固定顶部导航菜单

html - 可调整大小的固定顶部导航菜单

问题描述

我正在尝试制作一个将在 ipad 上查看的半响应式网站项目。我制作了一个最大宽度为 800 像素的 html 正文。这足以满足我的目的，但我在顶部也有一个带有下拉菜单的固定导航。当站点超过 800 像素时，它可以正常工作，但如果它缩小到该值以下，例如在 iPad 上垂直查看时到 768 宽度，菜单栏的一部分会突出一点，而 html 的其余部分会按比例缩放与视口。

我希望补救措施很简单。我在下面包含了我的代码的一个非常简化的版本。我删除了所有下拉菜单内容，因为它应该只是必须工作的容器。

提前致谢！:)

    <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%;
    }

768 宽度处的错误图片

标签： htmlcssmenuresponsivefixed

解决方案

好的，所以在您的屏幕截图中，我想我在 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;and right: 8px;:)

推荐阅读