主要在iOS上遇到问题(惊喜)我的页脚是一个粘性页脚,而它根据粘性页脚如何工作而工作问题是内容低于页脚,主要是女士的形象。
我尝试了几种解决方法,从图像到背景,将它组合到页脚,不同的定位,似乎没有任何工作。也许我忽略了一些明显的东西?
我替换了原始图片。将您的浏览器一直垂直移动到小提琴中,您将看到下面的内容。另外,我尝试在position:fixed
上使用.quote
,但这会导致iOS和Android上的软键盘出现问题。
FIDDLE:http://jsfiddle.net/6u5AJ/
.foot_c {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow-y:hidden;
margin: auto;
}
.footer {
background: #3c78bc;
position: relative;
text-align: center;
padding: 8px 0 5px;
text-align: center;
color: #FFFFFF;
z-index: 3;
}
.footerbg {
background: url(images/bgfoot.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 90px;
position: relative;
z-index: 1;
}
<div class="bg">
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="column">
<form id="myform" action="buttons.html" method="POST">
<input type="text" name="field1" placeholder="Enter your Zip"></input>
<input type="submit" value="Compare"></input>
</form>
</div>
<div class="quote">
<img src="images/quote_lady.png" alt="quote_lady">
</div>
</div>
<div class="foot_c">
<div class="footerbg">
</div>
<div class="footer">
<p><a href="tel:1-(999)-999-9999">Your Guide to Auto Insurance Quotes!</a></p>
<div class="phone">
<img src="images/phone.png" alt="phone">
<h3><a href="tel:1-(999)-999-9999"><span>Call Now</span><strong>1-(999) 999-9999</strong></a></h3><br />
</div>
<br><a href="terms.php" style="font-size: xx-small; text-decoration: underline">Terms of Use</a> | <a href="privacy.php" style="font-size: xx-small; text-decoration: underline">Privacy Policy</a>
</div>
</div>
</div>
答案 0 :(得分:1)
看看这是否有帮助,
对于这两个版本,我稍微更改了一下你的HTML,删除了foot-bg,我不明白你为什么这么做,并将你的背景选项hex color与img url合并。
http://jsfiddle.net/luckmattos/6u5AJ/2/
http://jsfiddle.net/luckmattos/yXRS8/1/
在FIXED版本上,我在主体上添加了一个填充底部,确保所有内容都会出现:
padding-bottom:90px // = height of the footer
让我kwnow!
答案 1 :(得分:0)
我通常喜欢这样做的方法是让页脚成为父母的两个孩子中的一个min-height:100
和position:relative
。这第一个孩子是你的内容容器,第二个显然是页脚。内容容器被制作为父级的100%高度,并且底部填充大到足以使其内容保持在页脚之外,该页脚绝对位于父级的底部。
修改了您的示例以显示此内容。我没有删除你的大部分CSS,所以可能不清楚更改的位置,但基本上是&#39;&#39; div似乎是你的主要容器,所以我做了min-height: 100%
(记得在所有它的父母中定义了100%的高度,然后它赢了工作)然后给了#39容器&# 39; div 100%的高度和底部的填充大到足以显示页脚。
希望这很清楚。