个人中心
gpt4 book ai didi

html - 页脚没有粘在页面底部(隐藏内容)

转载 作者：行者123 更新时间：2023-11-28 16:49:21 25 4
gpt4 key购买 nike

因此，我将 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>

最佳答案

您应该在 .custom-footer 上使用 position: fixed 而不是 position: absolute

关于html - 页脚没有粘在页面底部(隐藏内容)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32796705/

25 4 0
文章推荐： jquery - 自定义滚动条样式，隐藏条除非滚动
文章推荐： javascript - Puppeteer - 根据文本子项进行选择
文章推荐： javascript - JQuery 查找带有 rgb 的样式以替换为十六进制颜色
文章推荐： javascript - 如何在没有 async/await 的情况下使用 then、catch 来实现这个 promise 链
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com