0

我知道这是一个普遍的问题，但我无法在 Stackoverflow 或搜索谷歌上得到真正的答案。如何制作带有固定标头和链接的页面以及给定 URL 的 iFrame。我遇到的最接近的是这个带有 Fixed Header 的 iFrame。我真正想要实现的是CodeCanyon 上的这个例子。第一个链接给出了一个不错的答案，但页面有两个滚动条。提前致谢！

编辑：我想让 iFrame 拉伸到页面的高度:)

4

3 回答 3

1

你的 HTML 会是这样的......

<html>
<head>
</head>
<body>
<div style="height:[[some value you want in px]]"; width:100%;>
The logo and links come here
</div>
<iframe src="[[the url to load]]" style="width:100%;"></iframe>
</body>
</html>

注意 - 内联样式可以移动到样式表，对于 iframe，您需要使用 javascript/jQuery 计算窗口高度减去标题 div 高度并将高度应用于 iframe

于 2013-05-21T13:22:21.017 回答
1

您链接的示例使用 jquery 动态调整高度。

//function to adjust height of iframe
var calcHeight = function () {
    var headerDimensions = $('#header-bar').outerHeight(true);
    $('#preview-frame').height($(window).height() - headerDimensions);
}

$(document).ready(function () {
    calcHeight();
});

$(window).resize(function () {
    calcHeight();
}).load(function () {
    calcHeight();
});

这是我用来动态调整高度的代码。

您可以在 jsfiddle http://jsfiddle.net/QQKc4/11/中看到它

于 2013-05-21T13:36:40.497 回答
1

你可以做

<html>
    <head>
    </head>
    <body>
        <div style="height:(x)px; width:100%; position:absolute; top:0; bottom:0; z-index:2;">
            The logo and links come here
        </div>
        <div style="width:100%; height:100%; position:absolute; top:0; bottom:0; z-index:1">
            <iframe src="xx.html" style="margin-top:(x)px; width:inherit; height:inherit"></iframe>
        </div>
    </body>
</html>
于 2013-05-21T13:41:16.910 回答