Я пытаюсь создать интерфейс, который относительно основан на текущем размере DOM. Я делаю это, сильно используя проценты.
Одна вещь, которую я пытаюсь сделать, - это сделать узлы внутри абсолютного контейнера с padding-top:%.
Размер, который вычисляет%, полностью исключен для меня. Я не уверен, на каком количестве% основывается, но это, конечно же, не родительский узел. Однако заполнение фиксированным пикселем в одной и той же иерархии dom прекрасно работает.
См. Скрипт JS ниже: http://jsfiddle.net/AK3eT/
<div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; top:10%; width:30%; height:40%;">
<div style="border:solid 1px blue;height:20px;margin-top:20%"></div>
</div>
<div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; left:160px;top:10%; width:30%; height:40%;">
<div style="border:solid 1px blue;height:20px;margin-top:48px"></div>
</div>
Левый узел использует% padding, правый узел использует фиксированное заполнение пикселей. Они должны быть одинаковыми, но заполнение% полностью выключено.
Есть идеи? Я чувствую, что мне не хватает чего-то фундаментального здесь.
Да, вы делаете :)
вертикальный край или заполнение занимает родительскую ширину в качестве ссылки при использовании%: http://www.w3.org/TR/CSS2/box.html#padding-properties и http://www.w3.org/TR/CSS2/box.html # propdef рентабельностью-топ
margin-top: 20%
указывает верхнее поле, которое составляет 20 процентов от ширины содержащего элемента. Что я вижу из вашего кода, что ширина содержащего элемента равна 600 пикселей. поэтому верхняя граница 120px
120px. В случае с правым она составляет всего 48 px
. Вот почему они не идентичны.