секция inline-block 100% высота рушится в фиксированном контейнере

Question

Я пытаюсь установить высоту секции встроенного блока (необязательно, div, если это проблема) до 100%. Этот раздел содержится в фиксированном (позиции) div с высотой 100%. 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; 
} 

Итак, проблема: Секции заполнения всего видового экрана (как мне нравится это), НО, если я поместил в них немного контента (например, «тест»), они рушатся t o высота, которая необходима для содержания содержимого. Кроме того, они торчат внизу. Если я удаляю высоту в секциях, они торчат вверху.

История позади: Я хочу создать div, который содержит 3 секции (или divs), которые являются как высота и ширина, так и область просмотра. Затем я хочу, чтобы слайд содержал div, чтобы отображался только один из разделов.

Answer 1

Это на самом деле просто выравнивается по базовой линии, вы можете установить вертикальную Выровнять сверху

Добавить

section { 
    vertical-align: top; 
} 

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

Для получения дополнительной информации, вы можете проверить Why is this inline-block element pushed downward? Есть много читать.