footer JS adjustment issues

Question

Recently just used a piece of JS from another user question and answer and it serves to be quite good in terms of being a solution to the initial issue I had which was to have footer stick to bottom of viewport height even on a page which content doesn't fill whole page, but it now seems to have caused another issue.

On pages that need scrolling to view all content, the page ends at viewport height and does not allow scrolling which means portions of content cannot be viewed.

The code which i have used is below, credit for the code goes to claudix and was from his answer on this page:

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

Was wondering if anybody knew something i could add to that piece of javascript that would have the above code work for a page that does not have full content, however, when scrolling is needed, the JS code is disabled ?

Thanks !

score 2 · Answer 1 · answered Jan 03 '15 at 11:39

Use this code in your head tag

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

score 0 · Answer 2 · answered Jan 03 '15 at 08:08

0

Try switching of the overflow:hidden; on the body tag as it is prevent content to be spead out.

From my understanding you want to create a one page site using your own custom scrolling techiques. You could try adding slimScroll for jquery to create custom scrolling panels for your site while keeping everything in perspective without using the browser's scroll.

answered Jan 03 '15 at 08:08

skoumas

189
3
12

hey PHPDev, thanks for the reply. I just tried removing the overflow:hidden as per your suggestion, however that played around with a few other things on the page eg body dropped a around 50px from top and the footer then appeared halfway from the scrolldown. Thanks for the help, I may just remove that piece of JS code as it seems the downside is too harsh. – Dan Jan 03 '15 at 08:22

score 0 · Answer 3 · answered Jan 03 '15 at 08:42

Just read a post form a blog. I've removed the JS code, it was good for anybody else that might need it, however, just want to make it clear i'm not saying anything bad about Claudix's JS code. However, I just used min-height: 100vh; on page container and now footer is always botton, even when there are no floating elements to clear and it solved both issues. Thanks ! :)

footer JS adjustment issues

3 Answers3