2

我非常感谢您提供的任何帮助，请重新。以下导致大量无薪加班！

我正在尝试将 div 覆盖在 iframe 上，该 iframe 是浏览器视口的完整大小，但也使这个覆盖的 div 在滚动时与下面的 iframe 内容一起移动。当 iframe 大于视口时，我还尝试只显示一组滚动条。

要支持的主要浏览器是 OSX 上的 Safari，但如果支持该解决方案，如果有的话，其他跨平台浏览器将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%;">
<head>
<title>Prototype dashboard overlay selector</title>

<script type="text/javascript">
function GotoDashboard (sel) {
var url = sel[sel.selectedIndex].value;
window.location = url;
}
</script>

</head>
<body style="height:100%; margin:0px; padding:0px; background-color:white; overflow:auto;">

<div scrolling="auto" style="width:100%; height:100%; margin:0px; padding:0px;">

<div scrolling="auto" style="position:relative; display:block; width:100%; margin:0px; padding:0px; overflow:scroll;">

<form name="foo" style="position:absolute; z-index:999; border:0px; margin:0px; padding:0px; top:10px; right:200px;">
    <select name="dashboardselector" onchange="GotoDashboard(this);" style="margin:0px; padding:0px; border:1px; background-color:red; font-color:white;">
    <option value="">Select Dashboard</option>
    <option value="http://www.google.co.uk">Foo</option>
    <option value="http://www.amazon.co.uk">Bar</option>
    </select>
</form> 

<iframe src="http://www.bbc.co.uk" frameborder="0" width="100%" height="100%" scrolling="no" style="display:inline; overflow:visible; z-index:-1; margin:0px; padding:0px; width:100%; border:0px;">
</iframe>

<div>
</div>
</body>
</html>
4

0 回答 0