我知道这是一个愚蠢的问题，但我似乎无法解决它。
在我的索引页面中，我调用header.php了Iframe
<body>
<?php include 'header.html' ?>
<div class="clear"></div>
<iframe class="fr" width="100%" height="100%" align="center" marginheight="0" align="top" src="aboutus1.php" frameborder=0 scrolling="no" border="0" framespacing="0" id="bodyframeid" name="bodyframename" onLoad="autoResize('bodyframeid');" ></iframe>
</body>
问题是，iframe 与页面顶部的标题对齐。我尝试将 padding-top 移到 iframe，因此 iframe 移动到标题下方，但是当缩小时，它会显示中间的空白。
我想让我的页面是这样的：
+------------------------------+
| Header |
+------------------------------+
| Iframe |
| (contents of Iframe) |
+------------------------------+
页眉.html
<div class="centered">
<table id="tbheader">
<tr height="100px">
<td id="tdlogonavleft"><a href="aboutus1.php" target="contentframename"><img src="images/cti-logo.png" alt="logo" /></a></td>
<td id="tdlogonavright"><!--img src="images/menu.jpg" /-->
<div class="menu">
<ul id="navbar">
<li><a href="welcome.php"><img id="active-home" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" /></a></li>
<li><a href="aboutus1.php" target="bodyframename"><img id="active-aboutus" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="this.src='images/aboutus.jpg'" src="images/aboutus.jpg" /></a>
<ul>
<li class="x" style="left:-20px;"><a href="aboutus1.php" target="bodyframename">ABOUT CTI</a></li>
<li class="x" style="left:-20px;"><a href="aboutus2.php" target="bodyframename">OUR CLIENTS</a></li>
<li style="left:-20px;"><a href="aboutus3.php" target="bodyframename">MISSION / VISION </a></li>
</ul>
</li>
<li><a href="partners.php" target="bodyframename"><img id="active-partners" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="this.src='images/partners.jpg'" src="images/partners.jpg" /></a></li>
<li><a href="products1_1.php" target="bodyframename"><img id="active-products" onmouseover="this.src='images/hover-products.jpg'" onmouseout="this.src='images/products.jpg'" src="images/products.jpg" /></a> </li>
<li><a href="contactus.php" target="bodyframename"><img id="active-contactus" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout="this.src='images/contactus.jpg'" src="images/contactus.jpg" /></a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="bar"></td>
</tr>
</table>
<div class="clear"></div>
CSS
* {
font-family: verdana;
color:#514f4d;
}
html { overflow-y:scroll; }
body {
margin:0;
padding:0;
}
img { border:0; }
.blue { border:1px solid #00b1ef; }
.pageContent {
width:830px;
margin:0 auto;
}
.container { padding-top:7.5em; }
.bar {
background: url('images/heading-top.jpg') repeat-x;
height:20px;
z-index:1;
}
.centered {
margin:0 auto;
width:830px;
}
.footer {
background:url('images/heading-bottom.jpg') repeat-x;
height:20px;
z-index:5;
width:830px;
}
p.copyright {
font-weight: bold;
text-align: center;
line-height:11px;
}
#tbheader {
border-collapse:collpase;
margin:0;
padding:0;
position:absolute;
text-align:center;
width:830px;
border-spacing:0;
top:1em;
}
td#tdlogonavleft {
text-align:left;
vertical-align:top;
width:190px;
}
td#tdlogonavright {
vertical-align:bottom;
}
.menu {
height:58px;
width:425px;
float:right;
text-align:left;
z-index:0;
margin-right:-1px;
margin-bottom:-1px;
background:url('images/menu.jpg') no-repeat;
}
#d_home {
position:absolute;
width:85px;
height:58px;
display:inline-block;
background:url('images/home.jpg') no-repeat;
}
#d_home:hover {
position:absolute;
width:85px;
height:58px;
background:url('images/hover-home.jpg') no-repeat;
}
#d_about {
position:absolute;
margin-left:85px;
width:85px;
height:58px;
display:inline-block;
background:url('images/aboutus.jpg') no-repeat;
}
#d_about:hover {
position:absolute;
margin-left:85px;
width:85px;
height:58px;
background:url('images/hover-aboutus.jpg') no-repeat;
}
#d_partners {
position:absolute;
margin-left:170px;
width:85px;
height:58px;
display:inline-block;
background:url('images/partners.jpg') no-repeat;
}
#d_partners:hover {
position:absolute;
margin-left:170px;
width:85px;
height:58px;
background:url('images/hover-partners.jpg') no-repeat;
}
#d_products {
position:absolute;
margin-left:255px;
width:85px;
height:58px;
display:inline-block;
background:url('images/products.jpg') no-repeat;
}
#d_products:hover {
position:absolute;
margin-left:255px;
width:85px;
height:58px;
background:url('images/hover-products.jpg') no-repeat;
}
#d_contact {
position:absolute;
margin-left:340px;
width:85px;
height:58px;
display:inline-block;
background:url('images/contactus.jpg') no-repeat;
}
#d_contact:hover {
position:absolute;
margin-left:340px;
width:85px;
height:58px;
background:url('images/hover-contactus.jpg') no-repeat;
}
.x { line-height:1.5em; }
.box {
border:1px solid #cccccc;
width:270px;
height:290px;
-moz-box-shadow 3px 5px 4px rgba(235, 235, 235, 1);
-webkit-box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#060606')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#060606');
}
.clear { clear:both; }
/**Navigation**/
#navbar {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
float:left;
}
#navbar li a {
display: block;
padding:0;
background-color:#03beff;
text-decoration: none;
}
#navbar li ul {
display: none;
width:5.3em;
}
/**
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }