javascript - 百分比值的利润率高得离谱

Question

上次我没有表达清楚我的问题，被误解了。所以我在我的网站上得到了这个 iframe，我需要在标题和内容之间使用 % 值(现在这里是占位符)，但是在 margin-top 上使用百分比值会使其太大，100% 值大约是 1900px!看看吧:/image/TyfLQ.jpg或者只是查看我的网站:http://klaunfizia.pl/damian/ (单击齿轮图标)。如何强制 #portNav 的 margin-top 基于 iframe 的实际高度(基于用户屏幕分辨率)？

iframe 代码:

body 
{
background: rgba(0,0,0,0.85);
margin: 0 0 0 0;
height:100%;
max-height:600px;
max-width:900px;
}

#container
{
margin-top:-12px;
float:left;
width:100%;
}

#portNav
{
margin-top:30%;
}

#title
{
width:100%;
height:0.42%;
}

#content
{
width:70%;
clear:both;
margin-top:auto;
margin-bottom:auto;
}

<div id="container">
<div id="title">
    <h1>My portfolio</h1>
</div>

<div id="portNav" style="overflow:hidden;">
 <ul class="navi">
    <li>
        <a href="#"><img class="navi" src="../images/placeholder01_out.png" alt="1" /></a>
    </li>

    <li>
        <a href="#"><img class="navi" src="../images/placeholder02_out.png" alt="1" /></a>
    </li>

    <li>
        <a href="#"><img class="navi" src="../images/placeholder03_out.png" alt="1" /></a>
    </li>
 </ul>     
</div>
<a href="#" id="right-button">DALEJ!</a>

Answer 1

我不确定这是否相关，这是一个老问题，但是...与百分比一起使用时，margin-top 将上边距设置为容器宽度的百分比。这意味着 100% 是其所在容器宽度的 100%...而不是高度。