Question

上次我很难表达自己的问题，而且我被误解了。所以我在我的网站上得到了iframe，我需要在标题和内容之间使用％值（现在这里占位符），但在margin-top上使用百分比值会使它太大，100％的值大约是1900px！只需查看：http://imgur.com/FLGhAyn或只是查看我的网站：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将上边距设置为容器WIDTH的百分比。这意味着100％将是它所在容器内WIDTH的100％......而不是高度。

Answer 2

百分比100%是获取document高度的一种方式，这就是它返回巨大margin-top的原因。百分比值主要用于制作响应式布局，因为它们会根据文档的高度来更改值。因此，您可以使用像素值来提供固定的margin-top，或者使用较少的百分比值，例如2%或3%或其他适合您设计的值。

根据您的需要，将margin-top设置为您需要使用Javascript的实际帧大小。

可笑的巨大利润率与百分比值

2 个答案: