Question

我正在尝试制作一个半响应式网站项目，该项目将在ipad上查看。我做了一个HTML正文，最大宽度为800px。这对于我的目的来说已经足够好了，但是我在顶部还有一个固定的导航菜单，里面有下拉菜单。当网站超过800像素时，它可以正常工作，但是如果缩放到低于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%;
    }

Answer 1

好吧，在您的屏幕截图中，我想我看到的是8px正文以及左右两侧的默认边距。

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

lodash

或者可以使用#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;来代替宽度计算：）

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

1 个答案: