javascript - 我无法弄清楚的滚动错误

Question

我正在尝试创建一个移动网站，当您单击右侧的图像以显示导航并向右滚动时，出现了一个我无法弄清楚如何摆脱的空白区域。

jsFiddle DEMO

<div id="wrapper">
<div id="header">
    <div id="logo">
        <img src="images/logo.png">
    </div>
    <!--end div logo-->
    <div id="rectangle"><a id="show" href="#"><img src="images/rectangle.png"></a>
    </div>
</div>
<!--end div header-->
<div class="nav">Hello!</div>

Answer 1

已修复。您遇到的问题是填充不仅会在元素及其子元素之间放置空间，在大多数浏览器中，它还会将每一侧元素的大小增加那么多。结果是 #header 元素的宽度为 100%，每边有 5px 的填充，使其宽度为 100%+10px，正如其中一条评论所说。

要解决此问题，同时在#header 的边框和任何子元素之间保持 5px 的空间，您可以在#header 内立即放置一个 block 显示包装器 (div)，包围它的所有后代并应用 5px 的填充。

JSFiddle:http://jsfiddle.net/v7SZq/3/

HTML:

 <div id="wrapper">
    <div id="header">
        <div style="padding:5px;">
            <div id="logo">
                <img src="images/logo.png">
            </div>
            <!--end div logo-->
            <div id="rectangle"><a id="show" href="#"><img src="images/rectangle.png"></a>
            </div>
        </div>
    </div>
    <!--end div header-->
<div class="nav">Hello!</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#header {
    background:#2B3990;
    height:40px;
    width:100%;
    position:relative;
    border-bottom:1px solid #ec8123
}
#logo {
    float:left;
    vertical-align:middle;
    position:absolute;
    top:6px;
}
#rectangle {
    vertical-align:middle;
    height:;
    position:absolute;
    left:85%;
    top:13px;
}
.nav {
    width:85%;
    float:right;
    text-align:right;
    background:#000;
}

Javascript:

$(document).ready(function () {

    $(".nav").hide();
    $("#show").show();

    $('#show').click(function () {
        $(".nav").slideToggle();
    });

});

最后，快速回顾一下填充在大多数浏览器中的工作原理:

您在这张图片的“填充”区域中看到的空间是添加到 div 的大小，而不仅仅是偏移子元素。