0
我知道这可能会在脸上盯着我,但我无法确定可能导致我的问题的原因。我有一个页脚和一个iframe不能很好地结合在一起。我的页脚坐在我的iframe之上。无论用户是否上下滚动,我都需要页脚坐在页面底部,就像所有其他页面一样,并停留在此处。只需要它留在底部。我不太确定它是一个定位问题,div问题,是页脚的问题,还是iframe的问题。我猜这是页脚的问题,但页脚放置在我需要的所有其他页面上。这让我感到困惑。对于网页设计还是一个新的东西,所以我仍然围绕着定位属性进行包装,还有什么不是。以下是我有:IFrame问题:页脚位于iframe之上
CSS:
/*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;
}
HTML:
<!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>
很多中间的其他CSS样式一字排开,精细,并没有觉得有必要添加这些,除非它被要求。在过去的一天,我已经在这里和其他文章上找到了任何地方,并且无法找到我正在寻找的东西。任何帮助,将不胜感激。
这让脚下了!但它仍然位于顶部。几乎就像页面的主体不知道那里有一个页脚。在这里看到:http://www.jp.pima.gov/NewWebTest/Info/GeneralInfo-Spanish.html它是如此接近! – Heather
请问为什么你的'.footer1'类绝对定位?只需从'.footer1'类中删除绝对定位以及'bottom'和'left',它就可以修复它。什么定位是否将它从DOM的正常文档流程(文档对象模型)中提取出来。 https://www.w3schools.com/css/css_positioning.asp – Jorden1337
圣是的!非常感谢!就是这样!我知道它会把它拿出来,但我仍然不明白所有的定位和一切。我希望这个项目完成后,我可以坐下来学习更多。再次感谢你。 – Heather