滚动我无法弄清楚的bug

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中放置一个块显示包装器（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的大小，而不仅仅是偏移子元素。

Answer 2

从#header

中删除填充

#header {
/*padding:5px;*/
background:#2B3990;
height:40px;
width:100%;
position:relative;
border-bottom:1px solid #ec8123
}

fiddle