html - 有没有一种 CSS 方法可以按照黄金比例垂直放置 HTML 元素？

Question

我只想用 CSS 将一个 HTML 元素定位在水平居中和垂直的黄金比例。元素的高度必须绝对灵活，所以我不能只将 top-attribute 和 element-height 设置为百分比值。有什么办法吗？

示意图:

在图像中，相同颜色的箭头彼此呈黄金比例 (38.2% : 61.8%)。虚线只是虚构的。

Answer 1

我相信数学计算结果是这样的(这里只讨论垂直居中):

See Fiddle (感谢 Daniel 的制作)

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) */
}

这应该使您的绿色比例正确。高度可根据视口(viewport)大小灵活调整。

编辑:更多解释。请注意，蓝色箭头开始将 100% 的高度划分为 38.2 和 61.8。红色顶部箭头将是顶部蓝色部分 (38.2) 的 61.8，因此是 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 */
}