固定脚和外高度(true)返回值

Fixed footer and outerheight(true) return value

本文关键字：true 返回值 高度      更新时间：2023-09-26

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

代码:你可以

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

style.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的大小减去footer的大小。因此，如果为true，则应用"position:fixed" CSS规则，并将"top"设置为视口的大小减去页脚的高度。

但这并没有像预期的那样工作。奇怪的是(对我来说，我没有经验的jquery)，外层高度传递意想不到的值，因为这是一个错误的计算发生，有时页脚是固定的，即使内容大于viewport-footer的大小。

这是一篇解释这种行为的文章。

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

那么，我在哪里失败了?

这只是一种预感，但是你正在创建的#debug_datadiv从零<p>标签开始，然后你最终通过javascript插入其中的6个，在之后你已经计算了#site_content的高度。除非#debug_datadiv用position:absolute之类的东西放置在文档流之外，否则这意味着调用

时计算的高度
$('#site_content').outerHeight(true)

…调用

时不反映文档的实际高度
 if (altura_conteudo > (altura_viewport-altura_rodape))

…因为您已经通过append更改了这些额外的<p>标签的高度!这就解释了为什么你的代码在调整大小时像预期的那样起作用——在计算高度时，页面上总是有6个<p>标签。

如果是这种情况，修复方法可能是完全定位调试div。

设置height:auto;去掉你的#site_content样式，看看是否能解决问题。

相关文章：