Question

我知道这是一个普遍的问题，但我无法在Stackoverflow上获得真正的答案或搜索谷歌。如何为包含徽标和链接的固定标题以及给定URL的iFrame创建页面。我遇到的最接近的是iFrame with Fixed Header。我真正想要实现的是this example on CodeCanyon。第一个链接提供了一个不错的答案，但页面有两个滚动条。提前谢谢！

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

Answer 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

Answer 2

您链接的示例使用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/

中看到它

Answer 3

你可以做到

<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>

iFrame如何实现Header预览？

3 个答案: