我不知道的滚动错误

Question

我正在尝试创建一个移动网站，当您单击右侧的图像以显示导航并滚动到右侧时，出现空白，我不知道该如何删除。

jsFiddle演示

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

小提琴