粘性页脚导致内容低于折叠

时间:2014-03-14 16:43:15

标签: android html ios css mobile

主要在iOS上遇到问题(惊喜)我的页脚是一个粘性页脚,而它根据粘性页脚如何工作而工作问题是内容低于页脚,主要是女士的形象。

我尝试了几种解决方法,从图像到背景,将它组合到页脚,不同的定位,似乎没有任何工作。也许我忽略了一些明显的东西?

我替换了原始图片。将您的浏览器一直垂直移动到小提琴中,您将看到下面的内容。另外,我尝试在position:fixed上使用.quote,但这会导致iOS和Android上的软键盘出现问题。

enter image description here

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>

2 个答案:

答案 0 :(得分:1)

看看这是否有帮助,

对于这两个版本,我稍微更改了一下你的HTML,删除了foot-bg,我不明白你为什么这么做,并将你的背景选项hex color与img url合并。

检查这个小提琴:POSITION:RELATIVE

http://jsfiddle.net/luckmattos/6u5AJ/2/

检查这个小提琴:POSITION:FIXED

http://jsfiddle.net/luckmattos/yXRS8/1/

在FIXED版本上,我在主体上添加了一个填充底部,确保所有内容都会出现:

padding-bottom:90px // = height of the footer

让我kwnow!

答案 1 :(得分:0)

我通常喜欢这样做的方法是让页脚成为父母的两个孩子中的一个min-height:100position:relative。这第一个孩子是你的内容容器,第二个显然是页脚。内容容器被制作为父级的100%高度,并且底部填充大到足以使其内容保持在页脚之外,该页脚绝对位于父级的底部。

修改了您的示例以显示此内容。我没有删除你的大部分CSS,所以可能不清楚更改的位置,但基本上是&#39;&#39; div似乎是你的主要容器,所以我做了min-height: 100%(记得在所有它的父母中定义了100%的高度,然后它赢了工作)然后给了#39容器&# 39; div 100%的高度和底部的填充大到足以显示页脚。

希望这很清楚。

http://jsfiddle.net/jaredkhan/6u5AJ/3/