html - section inline-block 100% height 在固定容器中折叠

Question

我正在尝试将内联 block 部分(可选的 div，如果有问题的话)的高度设置为 100%。此部分包含在高度为 100% 的固定(位置)div 中。正如您在下面的代码中所见，body 和 html 的高度也为 100%。

fiddle :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;
}

所以，问题是:这些部分填满了整个视口(viewport)(如我所愿)，但是如果我在其中放入一些内容(比如“测试”)，它们就会折叠到需要的高度包含的内容。此外，他们坚持在底部。如果我删除部分中的高度，它们就会粘在顶部。

背后的故事:我想制作一个包含 3 个部分(或 div)的 div，它们的高度和宽度与视口(viewport)相同。然后我想水平滑动包含的 div，以便只有一个部分可见。

Answer 1

其实只是和基线对齐，可以设置vertical align to top

添加这个

section {
    vertical-align: top;
}

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

更多信息，您可以查看Why is this inline-block element pushed downward?有很多东西要读。