截面直排塊100％高度塌陷在固定容器中

Question

我正在嘗試將內聯塊部分（如果有問題的話，可以選擇div）的高度設置為100％。 此部分包含在高度為100％的固定（位置）div中。 如下面的代碼所示，body和html的高度也為100％。

小提琴： http ： //jsfiddle.net/vxBUG/

HTML：

<div id="workWrapper">
    <section id="marketing">
        test
    </section>
    <section id="video"></section>
    <section id="web"></section>
</div>

CSS：

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}
#workWrapper {
    height: 100%;
    width: 100%;
    overflow: show;
    position: fixed;
    white-space: nowrap;
    z-index: 100;
}
#workWrapper section {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: #aaa;
}

因此，問題是：這些部分填充了整個視口（如我所願），但是如果我在其中添加了一些內容（例如“測試”），它們就會折疊到容納內容所需的高度。 此外，它們還停留在底部。 如果我除去各部分的高度，則它們會粘在頂部。

背后的故事：我想制作一個div，其中包含3個部分（或div），這些部分的高度和寬度與視口一樣。 然后，我想水平滑動包含的div，以便僅顯示其中一個部分。

Answer 1

它實際上只是與基線對齊，您可以將垂直對齊設置為頂部

加上這個

section {
    vertical-align: top;
}

http://jsfiddle.net/vxBUG/1/

有關更多信息，您可以查看為什么將此內聯塊元素向下推？ 有很多書要讀。