0

我现在正在开发一个基于 Flash 的响应式网站。现在我的客户想在这个网站上添加一个 html 页脚，并告诉我做一些事情，当页面加载时，页脚应该位于文档的不可见区域，但是当任何人向下滚动时，他/她会看到页脚。我的客户告诉我，这也应该是响应式的，它可以在任何屏幕尺寸上工作。任何机构有任何想法如何做到这一点？

4

3 回答 3

1

我没有测试它的跨浏览器兼容性，但在 Firefox 上它可以工作。这只是一个概念证明，我不确定您是否可以在不破坏所有内容的情况下修改现有网站，但至少并非不可能。（对于 IE：你可能必须添加一个 doctype 声明来强制它进入标准模式）。

小提琴：http: //jsfiddle.net/QkX32/

HTML：

<body>
     <div id="wrapper">
         <div id="mainPage"></div>
         <div id="footer"></div>
     </div>                
</body>

CSS：

body{
    margin:0;
    padding:0;
}   

#mainPage{
    background-color:red;
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;    
}

#footer{
    background-color: blue;
    height: 20px;
    position: absolute;
    bottom: -20px;  
    width: 100%;    
}

#wrapper{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
于 2012-12-15T06:17:50.600 回答
1

您可以scrollHeight在页面加载后使用（.load）将 div 定位为参数的值absolute并将.scrollHeight其用作top参数的值。这是使用 jQuery 完成的，但您可以使用纯 javascript 实现相同的结果。例如

 function getheight(){
    var myheight = document.body.scrollHeight;
 }
 $(document).load(getheight(); #mydiv.css('top', myheight));

并在 css 中使用 % 值来获得一个液体盒：

#mydiv{
  position: absolute;
  width: 90%;
}
于 2012-12-15T06:18:40.383 回答
0

您需要测试（文档 - 页脚）是否小于窗口（即至少部分页脚可见），如果是，则将页脚绝对放置在窗口下方

if (($(document).height()-$("footer").height())<$(window).height()){
$("footer").css({
"position":"absolute",
"top":$(window).height();
});
}
于 2012-12-15T06:21:58.147 回答