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

Question

I'm trying to set the height of an inline-block section (optional a div, if that should be a problem) to 100%. This section is contained in an fixed (position) div with height 100%. body and html have a height of 100% too as you can see in the code below.

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

So, the problem is: The sections are filling the whole viewport (as I like it), BUT if I put a little content into them (like the "test"), they are collapsing to the height which is needed for containing the content. Also, they are sticking at the bottom. If I remove the height in the sections they are sticking at the top.

Story behind: I want to make a div which contains 3 sections (or divs) which are as height and width as the viewport. Then I want slide the containing div horizontal so that only one of the sections is visible.

Answer 1

It's actually just aligned to the baseline, you can set the vertical align to top

Add this

section {
    vertical-align: top;
}

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

For more info, you can check out Why is this inline-block element pushed downward? there are lots to read.