Question

我试图将内联块部分（可选的div，如果这应该是一个问题）的高度设置为100％。此部分包含在高度为100％的固定（位置）div中。 body和html的高度也是100％，如下面的代码所示。

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

所以，问题是：这些部分正在填充整个视口（我喜欢它），但是如果我把一些内容放入其中（比如＆＃34; test＆＃34;），它们就会崩溃到包含内容所需的高度。而且，他们坚持在底部。如果我删除它们粘在顶部的部分的高度。

背后的故事：我想创建一个包含3个部分（或div）的div，其高度和宽度与视口相同。然后我想滑动包含div水平，以便只有一个部分是可见的。

Answer 1

它实际上只是与基线对齐，您可以将垂直对齐设置为顶部

添加此

section {
    vertical-align: top;
}

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

有关详细信息，您可以查看Why is this inline-block element pushed downward?有很多内容可供阅读。

section inline-block 100％高度在固定容器中折叠

1 个答案: