我已经坚持了好几天了。我有一个页面，其中中央 View 是一个 iframe。在 iframe 上方有一排链接按钮，在 iframe 下方有一排链接按钮。我一直在尝试让顶部和底部按钮栏紧贴窗口的顶部和底部，即使它已调整大小时也是如此。我已经做到了这一点，但底部链接栏在 100% 的时间里都位于 iframe 后面。我试过定位、z-index、jquery……我完全被难住了。这是代码，减去链接(分类链接)。此外，我正在使用的是 SharePoint Designer 2010。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UNIT DASHBOARD</title>
<style type="text/css">
.CAATDashboardTable {
background-image: url('#');
background-repeat: repeat;
background-position: 0px 0px;
width: 750px;
padding-left: 1px;
border-collapse:collapse;
}
td.buttonItemWhite {
height: 53px;
width:174px;
padding-left:0px;
padding-right:0px;
text-align:center;
vertical-align:middle;
background-position:2px, 0, 0, 0;
cursor:hand;
}
</style>
</head>
<!--START CLASSIFICATION BANNER-->
<div name="bannertable" id="bannertable" style="position:fixed, top=100px, left=0px; width:100%; background-image:url('/PublishingImages/BannerGrad.gif'); background-repeat: repeat y; color: red">
<table border="0" width="100%" id="table1">
<tr style="font-size:8pt">
<td style="font-family:microsoft sans serif,lucinda sans,impact,arial black,arial;font-weight:bold; color:#ffffff;text-align:center">
CLASSIFICATION</td>
</tr>
</table>
</div>
<!--END BANNER-->
<body>
<div class="ddoverlap">
<table align="center" cellpadding="0" class="CAATDashboardTable" cellspacing="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" style="width: 100%">
<tr>
<td style="height: 65px; width: 100%;">
<!--BELOW TABLE CONTAINS THE TOP BORDER LINKS-->
<table style="width: 100%" align="center"><tr>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="SWO Weather Update" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#'")';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="SWO Weather Update"><strong>Weather</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
</td></tr>
</table>
</div>
<iframe name="target1" width="100%" src="#" frameborder="0" style="height: 785px"></iframe>
<table align="center" cellpadding="0" class="CAATDashboardTable" cellspacing="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" style="width: 100%">
<tr>
<td style="height: 65px; width: 100%;">
<!--BELOW TABLE CONTAINS THE BOTTOM BORDER LINKS-->
<table style="width: 100%" align="center"><tr>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
<td title="S-3 TOC Update Slide" style="background-position: center 0px; background-image:url('#'); background-repeat: no-repeat; color: #FFFFFF;" class="buttonItemWhite"
onclick="
window.open('#','target1');

" onmouseover="
this.style.backgroundImage = 'url("'#';)';

" onmouseout="
this.style.backgroundImage = 'url("'#'")';
">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>
</td></tr>
</table>
</body>
</html>
最佳答案
我不确定这是您的要求，但您不能在 iframe 之上显示任何内容，我认为这绝对不是跨浏览器。但我怀疑你需要这样做。
现在首先，您的 HTML 似乎不正确，因为您打开了一个 <div class="ddoverlap"> , 然后是 <table> ，然后是另一个 <table>其中包含链接。你关闭那个第二个 <table>然后尝试关闭 <div>而你还在1st里面<table> :
<div class="ddoverlap">
<!-- 1st table -->
<table align="center" cellpadding="0" class="CAATDashboardTable" cellspacing="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" style="width: 100%">
<tr>
<td style="height: 65px; width: 100%;">
<!--BELOW TABLE CONTAINS THE TOP BORDER LINKS-->
<table style="width: 100%" align="center"><tr> <!-- 2nd table! -->
<!-- (content omitted to uncover document structure) -->
</td></tr> <!-- (also this </td> is double) -->
</table> <!-- closing 2nd table -->
<!-- Not closing 1st table -->
</div>
所以建议您首先重新检查您的 HTML。然后你有几个选择。最简单的是继续使用 <table>用于加价。现在这被认为是一个坏习惯，但使用 <iframe> 也是如此。你可能会坚持下去。
使用 <table> 时对于标记，将其设为 1 个横跨可用屏幕空间的大表并放置 <iframe>里面。这样<iframe>将简单地拉伸(stretch)到 <td> 的大小它在里面。所以一个粗略的文档结构是:
<table style="width:100%;height:100%;">
<tr>
<!-- the <td>s with the links, I've counted, both top and bottom are 10 -->
</tr>
<tr>
<td colspan="10" style="width:100%;height:100%">
<iframe name="target1" width="100%" height="100%" src="#" frameborder="0"></iframe>
</td>
</tr>
<tr>
<!-- the <td>s with the links, again 10 -->
</tr>
</table>
注意 colspan="10"拥有 <td>与 <iframe>拉伸(stretch)顶部和底部的 10 个单元格的宽度。
编辑:执行此操作的非表格方式是使用 <div>和 CSS .顶部和底部的按钮数量不同，可能是这样的:
<head>
<style type="text/css">
#topbar, #bottombar {
position:absolute;
width:100%;
height:1.2em;
}
#topbar {
top:0;
}
#bottombar {
bottom:0;
}
iframe {
position:absolute;
top:1.2em;
bottom:1.2em;
width:100%;
}
#topbar a {
display:inline-block;
width:10%; /* 100/10=10 */
}
#bottombar a {
display:inline-block;
width:9%; /* 100/11~=9 */
}
</style>
</head>
<body>
<div id="topbar">
<a onclick="blablablayougetthepoint">Something</a>
<!-- more links, total of 10, notice the onclick is now on the a, no more td -->
</div>
<div id="bottombar">
<a onclick="yadayadayada">Some other thing</a>
<!-- more links, total of 11 -->
</div>
<iframe src="etc"></iframe>
</body>
关于css - 需要使 DIV 显示为 float 页脚，在调整窗口大小时将保留在 iframe 前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18547775/