2015-01-03 27 views
0

最近刚刚使用了另一个用户提问和答案中的一段JS,并且它对解决我最初遇到的问题有很好的解决方法,即将页脚粘贴到视口高度底部即使在内容不能填满整个页面的页面上,但现在似乎也引起了另一个问题。页脚JS调整问题

在需要滚动查看所有内容的页面上,页面在视口高度处结束,并且不允许滚动,这意味着无法查看部分内容。

我所使用的代码如下,信誉代码去claudix并从他的这个网页上回答:

How to make the web page height to fit screen height

<!--Code Starts--> 
<body style="overflow:hidden; margin:0"> 
    <form id="form1" runat="server"> 
     <div id="main" style="background-color:red"> 
      <div id="content"> 

      </div> 
      <div id="footer"> 

      </div> 
     </div> 
    </form> 
    <script language="javascript"> 
     function autoResizeDiv() 
     { 
      document.getElementById('main').style.height = window.innerHeight +'px'; 
     } 
     window.onresize = autoResizeDiv; 
     autoResizeDiv(); 
    </script> 
</body> 
<!--Code Ends--> 

如果任何人知道的东西我可以添加想知道到那段JavaScript将有上述代码工作的页面没有完整的内容,但是,当需要滚动时,JS代码被禁用?

谢谢!

回答

0

尝试切换身体标记上的overflow:hidden;,因为它会阻止内容被展开。

根据我的理解,您希望使用自己的自定义滚动技巧创建一个页面网站。 您可以尝试为jquery添加slimScroll,为您的网站创建自定义滚动面板,同时保持所有内容的透视度,而无需使用浏览器的滚动条。

+0

哎PHPDev,感谢您的答复。我只是尝试删除溢出:根据您的建议隐藏,然而,这与页面上的其他一些事情一起玩,例如身体从顶部下降约50px,然后页脚出现在scrolldown的一半。感谢您的帮助,我可能会删除那段JS代码,因为它看起来太糟糕了。 – Dan

0

只需阅读博客文章。我已经删除了JS代码,对于其他人可能需要它的代码是很好的,但是,只是想澄清一下,我并没有说Claudix的JS代码有什么不好的地方。但是,我只是使用最小高度:100vh;在页面容器上,现在页脚始终是botton,即使没有浮动元素可以清除,也解决了这两个问题。谢谢 ! :)

2

使用此代码在你的脑袋标签

<script type="text/javascript"> 


jQuery(document).ready(function(){ 

var docheight = jQuery(document).height(); 
var bodyheight = jQuery('body').height(); 
var bodywidth = jQuery('body').width(); 


/*alert(docheight+'--'+bodyheight);*/ 

if (bodyheight < docheight && bodywidth >= 1000) { 

    $(".footer-class-name").css('position',"absolute"); 

    } 


}); 
</script>