css - 需要使 DIV 显示为浮动页脚，在调整窗口大小时将保留在 iframe 前面

Question

我已经坚持了好几天了。我有一个页面，其中中心视图是 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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<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="&#xD;&#xA;window.open('#','target1');&#xD;&#xA;
" onmouseover="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#';)';&#xD;&#xA;
" onmouseout="&#xD;&#xA;this.style.backgroundImage = 'url(&quot;'#'&quot;)';&#xD;&#xA;">
<a title="S-3 TOC Update Slide"><strong>S-3</strong></a></td>



</td></tr>
</table>

</body>

</html>

score 0 · Accepted Answer

我不确定这是你的要求，但你不能在 iframe 上显示任何东西，我不认为，绝对不能跨浏览器。但我怀疑你需要。

现在首先，您的 HTML 似乎不合适，因为您打开 a <div class="ddoverlap">，然后是 a <table>，然后是包含链接的另一个。 <table>你关闭第二个 <table>，然后尝试关闭<div>你仍然在第一个 <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>for 标记。现在这被认为是一个坏习惯，但使用也是如此<iframe>，你可能会坚持下去。

用于<table>标记时，将其设置为 1 个横跨可用屏幕空间的大表，并将其放在<iframe>里面。这样，<iframe>它将简单地拉伸到<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>底部拉伸 10 个单元格的宽度。

编辑：这样做的非表格方式是使用<div>and 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 显示为浮动页脚，在调整窗口大小时将保留在 iframe 前面

1 回答 1

Related

Reference