Есть ли способ CSS для позиционирования HTML-элемента вертикально по золотому сечению?

Question

Я хочу расположить HTML-элемент по горизонтальной средней и вертикальной золотой пропорции только с помощью CSS. Высота элемента должна быть абсолютно гибкой, поэтому я не могу просто установить значения top-attribute и element-height в процентах. Есть ли способ сделать это?

Схематическое изображение:

На изображении стрелки одного цвета находятся в золотом отношении друг к другу (38,2%: 61,8%). Пунктирная линия только мнимая.

Answer 1

Я считаю, что математика сработает следующим образом (вертикальное центрирование обсуждается только здесь):

См. Fiddle (спасибо Дэниелу за это)

CSS

div {
    position: absolute; /* or fixed */
    top: 23.6%; /* height is 100% of viewport * 38.2% (blue)  * 61.8% (red) */
    bottom: 38.2%; /* height is 100% of viewport * 61.8% (blue) * 61.8% (red) */
}

Это должно сделать ваше соотношение правильным для зеленого. Высота соответствует размеру окна просмотра.

РЕДАКТИРОВАТЬ: Дополнительные пояснения. Обратите внимание, что синие стрелки начинают делить 100% высоты на 38,2 и 61,8. Красная верхняя стрелка будет 61,8 от верхней синей секции (38,2), следовательно, 23,6. Красная нижняя стрелка будет 61,8 от нижней синей секции (61,8), следовательно, 38,2. Теперь двойная проверка: 23,6 + 38,2 = 61,8 (это ВСЕГО расстояние двух красных стрелок, сложенных вместе). Таким образом, их соотношение составляет 23,6 / 61,8 = 38,2% и 38,2 / 61,8 = 61,8% (красные стрелки соответствуют вашему золотому сечению). Зеленый - 100 - 61,8 (общая красная стрелка) = 38,2 (общая зеленая зона). Верхняя зеленая стрелка - 38,2 (верхняя синяя) - 23,6 (верхняя красная) = 14,6. Нижняя зеленая область составляет 61,8 (нижняя синяя) - 38,2 (нижняя красная) = 23,6 (нижняя зеленая). Давайте проверим зеленый рацион: 14,6 / 38,2 = 38,2% и 23,6 / 38,2 = 61,8% (зеленые стрелки соответствуют вашему золотому сечению). Вот золотая пропорция наркомана в html / css версии вашей фотографии (я знаю, что ваша фотография была для иллюстрации, но это было весело):

HTML

<div class="golden"></div>
<div class="dotted"></div>
<div class="blue top arrow"></div>
<div class="blue bottom arrow"></div>
<div class="red top arrow"></div>
<div class="red bottom arrow"></div>
<div class="green top arrow"></div>
<div class="green bottom arrow"></div>

CSS

html {
    background-color: #000;
    width: 100%;
    height: 100%;
}   

body {
    background-color: #fff;
    width: 38.2%;
    height: 100%;
    margin: 0 30.9%;
    position: relative;
}

.golden {
    position: absolute;
    top: 23.6%;
    bottom: 38.2%;
    width: 38.2%;
    background-color: #ddd;
    left: 50%;
    margin-left: -19.1%;
}

.dotted {
    position: absolute;
    top: 38.2%;
    height: 0;
    width: 100%;
    border-top: 1px dotted #444;
}

.blue {
    position: absolute;
    right: 14.6%;
    width: 2px;
    background-color: #00f;
}

.blue.top {
    height: 38.2%;
    top: 0;
}

.blue.bottom {
    height: 61.8%;
    bottom: 0;
}

.red {
    position: absolute;
    right: 38.2%;
    width: 2px;
    background-color: #f00;
}

.red.top {
    height: 23.6%;
    top: 0;
}

.red.bottom {
    height: 38.2%;
    bottom: 0;
}

.green {
    position: absolute;
    right: 50%;
    width: 2px;
    background-color: #83f92c;
    border-color: #83f92c;
}

.green.top {
    height: 14.6%;
    top: 23.6%;
}

.green.bottom {
    height: 23.6%;
    bottom: 38.2%;
}

.arrow:before,
.arrow:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    width: 0;
    height: 0;
    margin-left: -6px;
    border-right:  7px solid transparent;
    border-left:   7px solid transparent;
}

.arrow:before {top: 0;}
.arrow:after {bottom: 0;}

.blue:before {border-bottom: 10px solid #00f;}
.red:before  {border-bottom: 10px solid #f00;}
.green:before {border-bottom: 10px solid #83f92c;}

.blue:after {border-top: 10px solid #00f;}
.red:after  {border-top: 10px solid #f00;}
.green:after {border-top: 10px solid #83f92c;}

РЕДАКТИРОВАТЬ 11-10-11: На основании комментария спрашивающего, что мое первое толкование выше не было правильным. Я предлагаю тот факт, что мое решение все еще будет работать, если предположить, что белая область - это контейнер содержимого, контролирующий высоту (в случае, если это полезно для всех). В таком случае сделайте это:

HTML

<div class="content">
    ...place some arbitrary length content here...
    [copy above HTML here]
</div>

CSS - сначала удалите html и body CSS сверху. Затем добавьте:

.content {
    position: relative; 
   /* this is the only vital point, you can also style it 
      similar to the body css in the first version above, minus the height */
}

Answer 2

Хорошо, я проверил это, и, кажется, работает.Трюк требует, чтобы два div s, inner и dummy имели абсолютно одинаковое содержимое.dummy используется для задания outer div соответствующей высоты, чтобы можно было позиционировать inner div в процентах от этой высоты.Немного хакерский, но без JavaScript.

http://jsfiddle.net/fVQeC/4/

<div class="outer">
    <div class="inner">
        Something<br>too<br>more<br>more<br>more<br>more
    </div>
    <div class="dummy">
        Something<br>too<br>more<br>more<br>more<br>more
    </div>
</div>

---

.outer{
    position: absolute;
    top: 38.2%;
}

.inner{
    width: 200px;
    background-color: blue;
    position: absolute;
    top: -38.2%;
}

.dummy{
    width: 200px; 
   visibility: hidden; 
}