个人中心
gpt4 book ai didi

javascript - 固定页脚和 outerheight(true) 返回值

转载 作者：行者123 更新时间：2023-11-28 07:51:14 25 4
gpt4 key购买 nike

我在 jquery 中实现可变页脚脚本时遇到问题。(但是 in JSFiddle 奇怪的是我没有遇到任何问题)。

代码:索引.htm

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <title>Footer Test</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <link rel="stylesheet" href="style.css" />

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->        
    </head>

    <body>
        <nav id="site_navbar" class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Habilitar navegação</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">LOGO</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <header id="site_header">

        </header>
        <main id="site_content">
            <div class="container">
                <h1>TEST</h1>
                <div id="debug_data"></div>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>Test Line</p>
                <p>FINAL LINE!</p>
            </div>
        </main>
        <footer id="site_footer">
            <div class="container">
                <p class="muted credit">Adaptable Footer (or not)</p>
            </div>          
        </footer>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Footer Fix -->
        <script src="js/footer_fix.js"></script>
        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </body>
</html>

样式.css

#site_header
{
    padding-top: 70px;
}

#site_content
{
    height: auto;
}

#site_footer
{
    background-color: #f5f5f5;
    width: 100%;
}
#site_footer .container
{
    padding: 20px;  
}

和 footer.js

function footer_fix(jQuery)
{
    // Variáveis
    var altura_viewport = $(window).height();
    var altura_conteudo = $('#site_content').outerHeight(true) + $('#site_header').outerHeight(true);   
    var altura_rodape = $('#site_footer').outerHeight(true);

    $('#debug_data').html("");

    $('#debug_data').append("<p>Header height : " + $('#site_header').outerHeight(true) + "px</p>");

    $('#debug_data').append("<p>#site_content height : " + $('#site_content').outerHeight(true) + "px</p>");

    $('#debug_data').append("<p>Total content height (header+#site_content sum) - 'altura_conteudo' value:" + altura_conteudo + "px</p>");

    $('#debug_data').append("<p>Expected value for total content height (header+#site_content sum) - raw element values " + $('#site_header').outerHeight(true) + "px + " + $('#site_content').outerHeight(true) + "px</p>");

    $('#debug_data').append("<p>Viewport window height: " + altura_viewport + "px</p>");

    $('#debug_data').append("<p>Footer height: " + altura_rodape + "ps</p>");

    // Se a altura da viewport (mais o tamanho do footer) forem maiores que o tamanho da altra do conteúdo (ou seja, sobrar espaço)
    if (altura_conteudo > (altura_viewport-altura_rodape))
    {
        $('#site_footer').css('position','static');
    }
    else
    {
        $('#site_footer').css('position','fixed');
        /* $('#site_footer').css('bottom','0px'); */
        $('#site_footer').css('top',altura_viewport-$('#site_footer').outerHeight());
    }
    $('#debug_data').append("<p>Position property > " + $('#site_footer').css('position') + "</p>");
    // PARA FIXAR O FOOTER NA PARTE INFERIOR DA PAGINA

}


$(document).ready(footer_fix);
$(window).resize(footer_fix);

好吧，问题如下:当页面加载或调整大小时，函数“footer_fix”被调用；它计算内容的大小是否小于视口(viewport)大小减去页脚大小。因此，如果为真，则应用“position:fixed”CSS 规则并将“顶部”设置为视口(viewport)大小减去页脚高度。

但这并没有像预期的那样工作。奇怪的是(对我来说，我没有使用 jquery 的经验)，outerheight 传递了意想不到的值，因此会发生计算错误，有时即使内容大于视口(viewport)页脚大小，页脚也会固定。

Here是解释行为的打印品。

编辑:事实上，当我调整窗口大小时 footer_fix 函数正常工作，但在 $(document).ready 中给我带来了不希望的行为。有关系吗？

那么，我在哪里失败了？

最佳答案

这只是一种预感，但是 #debug_data您正在创建的 div 从零开始 <p>标签，然后您最终通过 javascript 插入其中的 6 个，在您已经计算出 #site_content 的高度之后.除非#debug_data div 位于文档流之外，类似于 position:absolute ，这意味着当您调用时计算的高度

$('#site_content').outerHeight(true)

...在您调用时不反射(reflect)文档的实际高度:

 if (altura_conteudo > (altura_viewport-altura_rodape))

...因为您已经将高度更改为 append正在处理那些额外的 <p>标签!这可以解释为什么您的代码在调整大小时按预期运行——此时总是有 6 <p>计算高度时页面上出现的标记。

如果是这种情况，修复可能是绝对定位调试 div。

关于javascript - 固定页脚和 outerheight(true) 返回值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30407947/

25 4 0
文章推荐： html - 尝试使用 margin-left 和 margin-right 将以前绝对定位的元素居中
文章推荐： 通过 PushOver 的 Javascript(用户脚本)智能手机通知
文章推荐： ios - 移至自定义 UItableViewCell 中的下一个 UItextfield(具有多个部分的 Tableview)
文章推荐： ios - 如何在 Swift 字典中对同一个值使用多个键？
行者123
个人简介

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

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