Footer isn't sticking to the bottom of page (hides content)

Question

So I am using Weebly as a CMS for a site I am working on and have been having a few issues using a custom footer. Basically on this page: http://www.axelitepro.com/how-does-it-work.html

It seems to hide the content if you're not on a large monitor and have a short page height. I am using position:absolute and bottom:0 as you can see if you inspect the element.

If anyone could shed some light on what might be happening, then that would be much appreciated.

Thanks

The full code is here:

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
</head>

<body class='no-header-page  wsite-theme-light'>
    <input type="checkbox" id="nav-trigger" class="nav-trigger">
    <div class="wrapper">

        <div id="header">
            <div class="container">
                <div id="nav-handle">
                    <label for="nav-trigger" class="hamburger">
                        <span class="mobile"></span>
                    </label>
                    <div class="wsite-nav-cart-wrapper"></div>
                </div>
                <div id="logo">{logo}</div>
                <div id="search">{search}</div>
            </div>
        </div>

        <div class="page-sidebar">
            <div id="navhidden" class="nav">{menu}</div>
            <div id="nav" class="nav">{menu}</div>
        </div>


        <div class="page-content" style="background-color: #1E1E1E !important;">

            <div id="main" style="background-color: #1E1E1E !important; padding-top: 1.5em !important;"><div class="container">{content}</div></div>
            <div id="footer" style="visibility: none;">{footer}</div>



            <!-- Custom -->

                <!-- Left hand side content (page links) -->
                <div class="custom-footer">
                <p id="left-content">
                <a href="http://www.axelitepro.com/faqs.html"> FAQ's&emsp;&emsp;|&emsp;&emsp; </a>
                <a href="http://www.axelitepro.com/contact-us.html"> Contact Us&emsp;&emsp;|&emsp;&emsp; </a>
                <a href="http://www.axelitepro.com/terms-of-use.html"> Terms of Use&emsp;&emsp;|&emsp;&emsp; </a>
                <a href="http://www.axelitepro.com/privacy-policy.html"> Privacy </a>
                </p>

                <!-- Right hand side content (social links) -->
                <i class="fa fa-facebook-official"></i><i class="fa fa-twitter-square"></i><i class="fa fa-youtube-play"></i>
                </div>

            <!-- Styling -->
            <style>
            .custom-footer {
                position:absolute;
                bottom:0px;
                width: 100%;
                height: 7%;
                display: table;

                /* Gradient */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,000000+21,0e0e0e+79,4c4c4c+99 */
background: #4c4c4c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #4c4c4c 0%, #000000 21%, #0e0e0e 79%, #4c4c4c 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(21%,#000000), color-stop(79%,#0e0e0e), color-stop(99%,#4c4c4c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#000000 21%,#0e0e0e 79%,#4c4c4c 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#4c4c4c',GradientType=0 ); /* IE6-8 */
            }

            .custom-footer #left-content {
                color: white !important;
                display: table-cell;
                vertical-align: middle;
                padding-left: 5%;
            }

            .custom-footer i {
                font-size: 20px;
                color: white;
                display: table-cell;
                vertical-align: middle;
            }
            </style>


      </div>





      </div>

    <!-- JavaScript -->
    <script type="text/javascript" src="/files/theme/plugins.js"></script>
    <script type="text/javascript" src="/files/theme/custom.js"></script>
    <script type="text/javascript" src="/files/theme/mobile.js"></script>
</body>

</html>

@xxxmatko won't that mean it sticks at the bottom all the time? — dwinnbrown, Sep 26 '15 at 11:36
possible duplicate of [Fix footer to bottom of page](http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page) — Hkachhia, Sep 26 '15 at 11:40
My bad - the pages weren't linked with styling properly. Will delete this — dwinnbrown, Sep 26 '15 at 11:46

score 1 · Answer 1 · answered Sep 26 '15 at 11:58

1

You should position: fixed rather than position: absolute on .custom-footer

answered Sep 26 '15 at 11:58

om_jaipur

2,176
4
30
54

Footer isn't sticking to the bottom of page (hides content)

1 Answers1