Question

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

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

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

enter image description here

    .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>

Answer 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！

Answer 2

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

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

希望这很清楚。

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

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

2 个答案:

检查这个小提琴：POSITION：RELATIVE

检查这个小提琴：POSITION：FIXED