Question

我将滑出式菜单的高度设置为100％时出现问题。当我在浏览器中查看它时效果很好，但在移动设备中并没有那么多。

问题似乎是当浏览器计算屏幕的高度时，它包括当用户向下滚动时消失的网址栏。这导致height: 100%;的div出现约50px的短路。

此处提供了该网站的演示：http://nickersonweb.com/sandbox/flexiweb/

目前我正在解决一些问题（例如为什么固定标题在移动浏览器中没有与身体其他部分向右滑动，但是在我的电脑上，以及为什么你仍然可以在移动浏览器中打开菜单时滚动主体的宽度高度但不在我的电脑上。我现在只关注高度问题。

以下是HTML编码以及移动浏览器的CSS（或设置为宽度小于480px的桌面浏览器）。

HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Website Title</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="robots" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="generator" content="" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" media="screen, print" type="text/css" href="css/style.css" />
    <link rel="stylesheet" media="screen, print" type="text/css" href="css/custom.css" />

    <script type="text/javascript">
        function menuButton() {
            if( document.getElementById("htmlBody").className == "menuClosed" ) {
                document.getElementById("htmlBody").className="menuOpen";
            } else {
                document.getElementById("htmlBody").className="menuClosed";
            }
        }
    </script>

</head>
<body id="htmlBody" class="menuClosed">

    <div id="margins">

    <!----- HEADER ----->
    <div id="header">
        <div class="margins">

            <!----- LOGO ----->
            <div id="logo">
                <a href="">WebsiteName</a>
            </div>
            <!----- /LOGO ----->

            <!----- NAVBAR ----->
            <div id="navbar">
                <div class="left">
                    <ul>
                        <li>
                            <a href="">Link 1</a>
                        </li>
                        <li>
                            <a href="">Link 2</a>
                        </li>
                        <li>
                            <a href="">Link 3</a>
                        </li>
                        <li>
                            <a href="">Link 4</a>
                        </li>
                        <li>
                            <a href="">Link 5</a>
                        </li>
                        <li>
                            <a href="">Link 6</a>
                        </li>
                        <li>
                            <a href="">Link 7</a>
                        </li>
                        <li>
                            <a href="">Link 8</a>
                        </li>
                    </ul>
                </div>
                <div class="right" onclick="menuButton()"></div>
            </div>
            <div id="navbar-button" onclick="menuButton()"></div>
            <!----- /NAVBAR ----->

        </div>
    </div>
    <!----- /HEADER ----->

    <!----- BODY ----->
    <div id="body">
        <div class="margins">
            body text
        </div>
    </div>
    <!----- /BODY ----->

    <!----- FOOTER ----->
    <div id="footer">
        <div class="margins">
            Footer
        </div>
    </div>
    <!----- /FOOTER ----->

    </div>

</body>
</html>

CSS

@media only screen and (max-width: 480px) {

    body {
        width: 100%;
        position: relative;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        transition: all 200ms linear;
    }

    #margins {
        overflow: hidden;
        position: relative;
    }

    #header {
        position: fixed;
        z-index: 90;
        overflow: visible;
        height: 60px;
    }

    #logo {
        top: 15px;
    }

    #navbar .left {
        position: fixed;
        z-index: 100;
        overflow-y: scroll;
        bottom: 0px;
        left: 0px;
        width: 75%;
        height: 100%;
        background: #dddddd;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        transition: all 200ms linear;
    }

    .menuClosed #navbar .left {
        left: -75%;
    }

    .menuOpen #navbar .left {
        left: 0px;
    }

    .menuClosed {
        left: 0px;
    }

    .menuOpen {
        overflow: hidden;
        left: 75%;
    }

    .menuOpen #navbar .left li {
        float: none;
        margin: 0px;
    }

    .menuOpen #navbar .left a {
        color: #444444;
        padding: 10px;
    }

    .menuOpen #navbar .right {
        position: fixed;
        z-index: 100;
        bottom: 0px;
        left: 75%;
        width: 25%;
        height: 100%;
        background: rgba( 255, 255, 255, 0.25 );
        -webkit-transition: all 500ms linear;
        -moz-transition: all 500ms linear;
        -o-transition: all 500ms linear;
        transition: all 500ms linear;
    }

    #navbar-button {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 20px;
        height: 20px;
        background: url('../images/mobile-nav-button.png') no-repeat;
        cursor: pointer;
    }

    #body {
        margin: 70px 10px 10px 10px;
    }

}

我搜索了类似的问题，但无法找到答案。

移动浏览器中的Div高度100％太短

0 个答案: