Question

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

我正在尝试将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>

在iframe上叠加div，这是视口的完整大小+然后使用iframe / page进行div滚动？

0 个答案: