прокрутка ошибка, которую я не могу вычислить

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

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

fiddle

Answer 2

Fixed. Проблема, с которой вы столкнулись, заключается в том, что заполнение не только помещает пространство между элементом и его дочерними элементами, но и в большинстве браузеров оно также увеличивает размер элемента на каждой стороне. В результате элемент #header имеет ширину 100% и 5px отступов с каждой стороны, что делает его 100% + 10px широким, как сказал один из комментариев.

Чтобы устранить эту проблему, сохранив при этом 5px пространства между границей #header и любыми дочерними элементами, вы можете разместить оболочку отображения блока (div) непосредственно внутри #header, охватывая все его потомки и применяя 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(); 
    }); 

}); 

Наконец, быстрое обновление на том, как работают отступы в большинстве браузеров:

Пространства вы видите в «Padding» зоне в этом изображении ДОБАВЛЕНИЯ к размеру div, а не только смещение дочерних элементов.