0

上次我表达得很糟糕，我被误解了。所以我在我的网站上得到了那个 iframe，我需要在标题和内容之间使用 % 值（现在这里是占位符）但是在 margin-top 上使用百分比值会使其太大，100% 的值大约是 1900 像素！看看： 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>

4

2 回答 2

2

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

于 2014-03-21T02:35:28.610 回答
0

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

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

于 2013-10-14T20:35:03.287 回答