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

问题描述 投票：0回答：1

我正在尝试制作一个半响应的网站项目，将在ipad上查看。我制作了一个最大宽度为800px的html主体。这适用于我的目的，但我也有一个固定的导航在顶部与下拉菜单。当网站超过800px时，它工作正常，但如果它缩小到那个以下，例如在iPad上垂直观看时的768宽度，菜单栏的一部分伸出一点，而其余的html按比例缩放与视口。

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

提前致谢！ :)

    <html>
        <head>
        </head>
        <body>
            <div id="page">
                <header id="apu_top">some content<img src="images/chapter_cover_images/2x/[email protected]" 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%;
    }

picture of error at 768 width

html css menu responsive fixed
1个回答
0
投票

好吧，在你的截图我想我看到8px和左右两侧的默认边距。

所以你可以做的是增加100％的宽度计算减去2 * 8px。保持最大宽度，使其永远不会超过800px。

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

或者代替宽度calc，你可以使用left: 8px;和right: 8px; :)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.