margin-height в процентах от контейнера

Это, вероятно, старая проблема, но я не могу найти ответ. Все что мне нужно:margin-height в процентах от контейнера

Плавающий контейнер div, высота которого варьируется в зависимости от размера окна.
Внутренний корпус фиксированного размера, вертикальное положение которого зависит от размера контейнера.
Еще один фиксированный размер справа внизу под №2.

Следующий код удовлетворяет условиям № 1 и № 3: изменение размера окна также правильно изменяет размер контейнера div, а второй внутренний div находится под первым внутренним div.

Но условие № 2 не удовлетворено. Я думал, что «margin-top» в процентах приведет к изменению значения в зависимости от высоты родительского контейнера, но, похоже, это не работает. Изменение размера окна ничего не делает для вертикального положения внутреннего div внутри контейнера div.

Это не похоже, что это должно быть так сложно, но это безумие! Пожалуйста помоги!

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>css test</title> 
    <style>html, body {height: 100%;}</style> 
</head> 
<body> 
    <div style="height: 50%; width: 100px; float: left; background-color: #C00; text-align: center;"> 
    <div style="margin-top: 50%; height: 40px; width: 40px; background-color: #0C0;"></div> 
    <div style="height: 40px; width: 40px; background-color: #00C;"></div> 
    </div> 
</body> 
</html>

источник

2013-08-21 nttaylor

добавить еще одну оболочку DIV, чтобы обернуть как внутренние дивы для позиционирования:

<div style="height: 50%; width: 100px; float: left; background-color: #C00; text-align: center; position: relative;"> 
    <div style="position: absolute; top: 50%; margin-top: -20px;"> 
     <div style="height: 40px; width: 40px; background-color: #0C0;"></div> 
     <div style="height: 40px; width: 40px; background-color: #00C;"></div> 
    </div> 
</div>

, и здесь JS скрипку попробовать: http://jsfiddle.net/maysora/RFevT/

источник

2013-08-21 05:49:52 Roy

Замечательно! Я до сих пор не понимаю, почему браузер придумал позиционирование, которое он делает в моей первоначальной версии, но я могу жить с этим. – nttaylor

margin-height в процентах от контейнера

ответ

Смежные вопросы