Позиция css с процентом

Question

У меня проблема с положением divs относительно другого div.

Я хочу сделать div, который находится в горизонтальной середине экрана, и в этом div я хочу разместить 3 других div с одинаковой высотой. Но все они должны реагировать.

Изображение говорит больше, чем слова :)

<div id="zwrapper"> 
<div id="z1" class="row"></div> 
<div id="z2" class="row"></div> 
<div id="z3" class="row"></div> 
</div> 

Проигрыватель Blu элемент HTML,

html{ 
    background: steelblue; 
    height: 100%; 
    width: 100%; 
    top:0; left:0; bottom: 0; right:0; 
} 

известью один IST, что Див (#zwrapper), где я хочу, чтобы добавить три красных div.

#zwrapper{ 
    height: 81%; 
    top: 10%; 
    width: 100%; 
    left: 0; 
    position: absolute; 
    background: lime; 
} 

Красные divs создают проблемы. Все divs имеют высоту 30%. Первый должен быть выровнен сверху, а третий - снизу. Средний div с id #z2 является единственным, у которого есть запас 5%.

.row{ 
    position: relative; 
    width: 80%; 
    background: red; 
    height: 30%; 
} 
#z2{ 
    margin: 5% 0; 
} 

Моя идея состояла в том, чтобы поставить 3 дивы с высоты 30% в обертку и дают средний маржинальный (верх/низ) 5%, так что я получаю высоту 100%. Но это не сработает.

Если я изменяю размер окна по ширине, высота красных divs изменяется, хотя я не изменяю высоту.

Я делаю скрипку, чтобы продемонстрировать это. http://jsfiddle.net/ELPJM/

Заранее спасибо

Answer 1

Проблема заключается в том, что значения процента в margin всегда по отношению к ширине, а не высота. Вы можете достичь этого, используя вместо этого абсолютное позиционирование и устанавливая «верхнее» значение для каждой строки. Как это:

.row { 
    position: absolute; 
    width: 80%; 
    background: red; 
    height: 30%; 
} 

#z1 { 
    top: 0%; 
} 

#z2 { 
    top: 35%; 
} 

#z3 { 
    top: 70%; 
} 

http://jsfiddle.net/ELPJM/8/

Answer 2

Это должно решить его

.row{ 
    position: relative; 
    width: 80%; 
    margin:0 auto; 
    background: red; 
    height: 30%; 
} 
#z2{ 
    margin: 5% auto; 
} 

Answer 3

HTML

<div id="zwrapper"> 
    <div class="holder"> 
     <div id="z1" class="row"></div> 
     <div id="z2" class="row"></div> 
     <div id="z3" class="row"></div> 
    </div> 
</div> 

CSS

html,body{height: 100%;} 
#zwrapper{min-height: 100%;} 
#zwrapper:after{ 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    width: 1px; 
} 
#zwrapper.holder{ 
    display: inline-block; 
    vertical-align: middle; 
} 

Answer 4

Это ваш margin: 5% 0;, что делает изменение высоты. Я не уверен, что margin-top и -bottom измеряет его процент, но не от того, что высота родительского элемента. Поэтому вы не можете использовать его, чтобы считать его 100% высоты.

попробуйте вместо этого:

<div id="zwrapper"> 
    <div id="z1" class="row"></div> 
    <div class="spacing"></div> 
    <div id="z2" class="row"></div> 
    <div class="spacing"></div> 
    <div id="z3" class="row"></div> 
</div> 

с моделированием:

.spacing{ height: 5%; }