使用nowrap的水平导航

Question

对于我正在构建的具有水平导航的站点，我使用的是white-space: nowrap;和display: inline-block;。这可以用于水平地对齐width: 100%;和height: 100%; div，我面临的问题是如果在这些div中添加任何其他元素，它会将父div向下推约300 it，如您在这里看到的JSFiddle。

我不知道是什么问题。我可以通过对每个子元素使用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>

Answer 1

尝试使用position属性。完整代码：

<style>
html, body {
    height: 100%;
}

body {
    margin: 0; 
    padding: 0;
    font-size:0;

}

.full {
    float:left;
    width: 100%;
    height: 100%;
    font-size:16px;    
}

#screen-1 {
    background: red;
    position:absolute;
    top:0px;
    left:0%;
}

#screen-2 {
    background: blue;
    position:absolute;
    top:0px;
    left:100%;
}

#screen-3 {
    background: yellow;
    position:absolute;
    top:0px;
    left:200%;
}
.wrap {
    min-width:100%;
    max-width:1000%;
    max-height: 100%;

}
</style>
<div class="wrap">
    <div id="screen-1" class="full"><h1>HELLO</h1></div>
    <div id="screen-2" class="full"></div>
    <div id="screen-3" class="full"></div>
</div>