Question

在网站上，我们有一个iframe页脚，所以现在当浏览器收缩时，页脚会被切断。什么是解决这个问题的最佳方法？ HTML

<div class="footer">
    <iframe src="footer.html" class="footer" scrolling="no"></iframe>
</div>

CSS：

.footer {
  border: none;
  height: 287.2px;
  position: absolute;
  bottom 3;
  width: 100%;
}
.text-center {
  text-align: center;
  display: block;
}

.social {
  display: inline-block;
  line-height: 1;
  margin-bottom: 16px;
  list-style: none;
  text-align: center;
  padding-left:0;
}

.web-footer {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
  width: 100%;
    diplay:block;
  margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  border: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
      box-sizing: border-box;
  display: block;
}

.footerfull {
  max-width: 100%;
      margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  border: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
      box-sizing: border-box;
  display: block;
}

.footerfullback {
  background: #D2D7D3;
    margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  border: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
      box-sizing: border-box;
}

.footwrap {

  width: 100%;
  text-align: center;
}

.social>* {
  display: inline-block;
      margin: 0 8px;
    margin-top: 0px;
    margin-right: 8px;
    margin-bottom: 0px;
    margin-left: 8px;
  text-align: center;

}

.social a img{
  display: inline-block;
  text-align: center;
}



.h5 {
  text-align: center;
      font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.070em;
  font-family: Montserrat;
}

.foo {
  width: 100%;
 background:#bdc3c7;
}


.footcontainer {
  margin: auto;
  text-align: center;
}

#wrapper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  min-height: 99%;
}

页脚HTML

    <div class="footcontainer">
            <footer class="web-footer">
                <div class="footerfull footerfullback">
                    <div class="footwrap">
                        <div class="space"></div>
                            <div class="text-center">
                                <ul class="social">
                                    <li>
                                        <a href="https://www.facebook.com/">
                                            <img src="css/social/facebook.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://twitter.com/">
                                            <img src="css/social/twitter.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://instagram.com/">
                                            <img src="css/social/Instagram.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.youtube.com/">
                                            <img src="css/social/youtube.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://plus.google.com/">
                                            <img src="css/social/g+.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://github.com/" target="_blank">
                                           <img src="css/social/Github.png"></img>
                                        </a>
                                    </li>
                                </ul>
                                <br/>
                                <a href="https://github.com/[![enter image description here][1]][1]"><p class="h5">Source Code for this Website</p></a>
                                <br/>
                        </div>
                        </div>
                                <div class="foo">
                                        <p class="h5">Thunderbots 2015</p>
                                        <a href="mailto:team@thunderbots.net"><p class="h5">team@thunderbots.net</p></a>
                                </div>
                        </div>
                    </div>
                </div>
            </footer>
    </div>
</html>

我试图查看各种网站的粘性页脚，但似乎大部分补救措施都不适用于iframe页脚。对于我们的网站，如果没有iframe页脚，回去似乎为时已晚。提前谢谢！

Answer 1

你尝试使用固定位置而不是绝对位置吗？假设您的iframe有.footer类，请尝试使用此CSS：

.footer {
  position: fixed;
  bottom: 3px;
  width: 100%;
  height: 287px;
  border: none;
}

PS：小数像素数量将在CSS中舍入，因此287.2px的高度值应为287px。

Answer 2

Theres没有理由在你的情况下粘性页脚无法工作，你需要的只是一个固定的高度。

 height: 287.2px;

请参阅http://jsfiddle.net/sjmcpherso/4Lf35nd3/

或许你有粘性页脚和固定页脚混淆？粘性页脚总是意味着位于内容的底部而不是过去的内容，而具有“position：fixed”的固定元素将始终保持在参考点中，其最接近的父级设置为position：relative

当浏览器缩小时，iFrame Footer会被切断

2 个答案: