html - nowrap を使用した水平ナビゲーション

Question

水平方向のナビゲーションを備えた私が構築しているサイトでは、 を使用white-space: nowrap; していdisplay: inline-block;ます。私が直面している問題は、これらの div 内に他の要素を追加するwidth: 100%;とheight: 100%;、親 div が約 300px押し下げられることです。

何が問題なのかわかりません。すべての子要素を使用することで回避できますが、position: absolute;そうする必要はないと感じています。

以下の完全なコード...

html, body {
    height: 100%;
}

body {
    margin: 0;  padding: 0;
    white-space: nowrap;
    font-size:0;

}

.full {
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size:16px;    
}

#screen-1 {
    background: red;
}

#screen-2 {
    background: blue;
}

#screen-3 {
    background: yellow;
}

---

<div id="screen-1" class="full">
<h1>HELLO</h1>
</div>  

<div id="screen-2" class="full">

</div> 

<div id="screen-3" class="full">

</div>