Html IFrame问题：页脚位于IFrame的顶部
我知道这可能正盯着我的脸，但我不太清楚是什么导致了我的问题。我有一个页脚和一个iframe，它们在一起玩得不好。我的页脚位于iframe的顶部。我需要我的页脚坐在我的页面底部，就像我的所有其他页面一样，并保持在那里，不管用户是否上下滚动。只是需要它留在底部。我不太确定这是定位问题、div问题、是页脚问题还是iframe问题。我猜这是页脚的问题，但是页脚在我所有其他页面上都放在了我需要的地方。这就是让我困惑的地方。对于网页设计来说，我还是个新手，所以我仍然在思考如何定位属性之类的问题。以下是我所拥有的： CSS: HTML:Html IFrame问题：页脚位于IFrame的顶部,html,css,iframe,footer,Html,Css,Iframe,Footer,我知道这可能正盯着我的脸，但我不太清楚是什么导致了我的问题。我有一个页脚和一个iframe，它们在一起玩得不好。我的页脚位于iframe的顶部。我需要我的页脚坐在我的页面底部，就像我的所有其他页面一样，并保持在那里，不管用户是否上下滚动。只是需要它留在底部。我不太确定这是定位问题、div问题、是页脚问题还是iframe问题。我猜这是页脚的问题，但是页脚在我所有其他页面上都放在了我需要的地方。这就是让我困惑的地方。对于网页设计来说，我还是个新手，所以我仍然在思考如何定位属性之类的问题。以下是我所拥
总情报局
总情报局
&Ubicación Central
皮马县综合司法法院
塞贡多皮索市石头大道北240号
亚利桑那州图森85701
（520）724-3171
信息获取者请访问图森市网站：
&庆祝节日的时间和地点
维也纳，上午8:00至下午5:00，节日除外
新阿尼诺
迪亚德尔奥布雷罗酒店
Día de Martin Luther King
阿米蒂西奥酒店
总统阁下
格拉西亚斯学院
迪亚德洛斯卡多斯酒店
格拉西亚斯学院
Día de la Independencia
纳维达
&计划
$（函数（）{
$（“#header”）.load（“/NewWebTest/header.html”）；
$（“#导航”）.load（“/NewWebTest/navigation.html”）；
$（“#footer”）.load（“/NewWebTest/footer.html”）；
});
<>很多中间的CSS样式是整齐的，不需要添加，除非请求。在过去的一天里，我在这里和其他文章上到处都找了，找不到我要找的东西。任何帮助都将不胜感激。在您的
的样式clear:both它位于iframe顶部的原因是因为您有iframe
float:left
。你需要清除你的浮动。这让页脚掉下来了！但它仍然在上面。就像页面主体不知道有页脚一样。看这里：太近了！我可以问一下，为什么您的.footer1
类是绝对定位的吗？只需从.footer1
类中删除该绝对位置以及底部
和左侧
，它就会修复它。定位的作用是将其从DOM（文档对象模型）的正常文档流中移除。天哪，是的！非常感谢你！就这样！我明白了，我还是不明白所有的位置和一切。我希望在这个项目完成后，我能坐下来学习更多。再次谢谢你。很高兴我能帮忙。
/*BODY*/
html, body {
background:White;
font-family:Segoe UI;
width:100%;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position:relative;
}
#body {
padding:10px;
padding-bottom:460px;
}
.footer1 {
background-color:#494949;
display:inline-block;
width:100%;
height:360px;
position:absolute;
bottom:100px;
left: 0;
}
.footer2 {
background-color:black;
display:inline-block;
width:100%;
height:100px;
/*margin-top:0px;*/
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pagina De Informacion General</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="CaseTypes/style.css" type="text/css" media="screen"/>
<script src="/NewWebTest/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--HEADER-->
<div id="header">
</div>
<!--PAGE TITLE-->
<div id="pageTitle">
Pagina De Informacion General
</div>
<!--NAVIGATION MENU-->
<div id="navigation">
</div>
<br/>
<div id="body" style="height:100%">
<div style="height: 532px">
<div id="openingImage">
<img src="../images/Blended Courthouse JPG Less Opacity.jpg" alt="Courthouse" height="274" width="1271"/>
</div>
<!--DIV LEFT: ANNOUNCEMENTS-->
<div id="annouceDiv">
<div class="sectionHeader">
   Ubicación Central
</div>
<br/>
<div class="announceSection" style="text-align:center">
Pima County Consolidated Justice Court<br/>
240 N. Stone Avenue, segundo piso<br/>
Tucson, AZ 85701<br/>
(520) 724-3171 <br/><br/>
Para obtener información sobre estacionamiento, visite el sitio web de la Ciudad de Tucson:<br/>
<a href="https://www.tucsonaz.gov/park-tucson/where-can-i-park-downtown" target="_blank">City of Tucson Downtown Parking</a>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv">
<img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider"/>
</div>
</div>
<div id="annouceDiv">
<div class="sectionHeader">
   Horario y Cierre por Dias Festivos
</div>
<br/>
<div class="announceSection" style="text-align:center">
Lunes a Viernes, 8:00 a.m. to 5:00 p.m., excepto días festivos<br/>
<table style="margin:auto; width:100%">
<tr>
<td>Año Nuevo</td>
<td>Día del Obrero</td>
</tr>
<tr>
<td>Día de Martin Luther King</td>
<td>Día del Armisticio</td>
</tr>
<tr>
<td>Día de los Presidentes</td>
<td>Día de Acción de Gracías</td>
</tr>
<tr>
<td>Día de los Caídos</td>
<td>Día despues de Acción de Gracías</td>
</tr>
<tr>
<td>Día de la Independencia</td>
<td>Navidad</td>
</tr>
</table>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv" style="width: 100%">
<img src="../images/EchoPet_Line_Break_PNG.png" alt="Divider" style="width:100%" height="39"/>
</div>
</div>
</div>
<div style="float:left; width:100%">
<div id="annouceDiv" style="width:100%">
<div class="sectionHeader" style="margin-right:60px">
   Plano
</div>
<br/>
<div class="announceSection" style="text-align:center; margin-right:60px">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.2154892306807!2d-110.97141080000001!3d32.22536379999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d6711e54972b5f%3A0x655603b7f78ec698!2s240+N+Stone+Ave%2C+Tucson%2C+AZ+85701!5e0!3m2!1sen!2sus!4v1422889378316"
width="95%" height="450" postion="relative" bottom="460px" frameborder="0" style="border:0">
</iframe>
</div>
<!--SECTION DIVIDER IMAGE-->
<div class="breakImageDiv" style="width:100%">
<img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider" style="width:100%"/>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div id="footer" style="position:relative; bottom:0">
</div>
<!--Javascript for header, nav, and footer-->
<script type="text/javascript" src="/NewWebTest/jquery.min.js"></script>
<script type="text/javascript" src="/NewWebTest/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$("#header").load("/NewWebTest/header.html");
$("#navigation").load("/NewWebTest/navigation.html");
$("#footer").load("/NewWebTest/footer.html");
});
</script>
</div>
</body>
</html>