Question

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

代码： index.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>

的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”;它计算内容的大小是否小于视口大小减去页脚大小。因此，如果为true，则应用“position：fixed”CSS规则并将“top”设置为viewport的大小减去页脚高度。

但这并没有像预期的那样发挥作用。奇怪的是（对我而言，我对jquery没有经验），外部高度传递意外值，并且因为这会发生错误计算，有时即使内容大于视口 - 页脚大小，页脚也会固定。

Here是解释行为的印刷品。

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

那么，我失败了？

Answer 1

取高度：自动;超出#site_content样式，看看是否能解决问题。

Answer 2

这只是一种预感，但是您创建的<div> <p>Total number of apartments: 2</p> <p>Average apartment price: 425</p> <p>Total properties with cheap rental price: 2</p> </div> div以零#debug_data标签开头，然后您最后通过javascript插入其中的6个，之后 >您已经计算出<p>的高度。除非#site_content div位于文档流之外且类似于#debug_data，否则这意味着调用时计算的高度

position:absolute

...在您致电时未反映文件的实际高度：

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

...因为您已经通过if (altura_conteudo > (altura_viewport-altura_rodape))额外的append标签更改了高度！这可以解释为什么您的代码在调整大小时按预期运行 - 此时在计算高度时页面上总是有6个<p>标记。

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

固定页脚和外部高度（true）返回值

2 个答案: