Question

所以我使用Weebly作为我正在处理的网站的CMS，并且使用自定义页脚遇到了一些问题。基本上在这个页面上： http://www.axelitepro.com/how-does-it-work.html

如果您不在大型显示器上并且页面高度较短，则似乎会隐藏内容。我正在使用position:absolute和bottom:0，因为您可以看到是否检查了该元素。

如果有人能够对可能发生的事情有所了解，那将非常感激。

由于

完整的代码在这里：

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

Answer 1

您应该position: fixed而不是position: absolute

上的.custom-footer

页脚不会粘在页面底部（隐藏内容）

1 个答案: