Javascript 固定页脚和outerheight（true）返回值_Javascript_Jquery_Html_Css

Javascript 固定页脚和outerheight（true）返回值

javascript jquery html css

Javascript 固定页脚和outerheight（true）返回值,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在jquery中实现可变页脚脚本时遇到问题。（但奇怪的是，我没有遇到任何问题）代码： index.htm <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta nam

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

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

和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);

function footer\u fix（jQuery）
{
//瓦里亚维斯
var altura_viewport=$（窗口）.height（）；
var altura_conteudo=$（“#站点_内容”）.outerHeight（true）+$（“#站点_标题”）.outerHeight（true）；
var altura_rodape=$（“#站点_页脚”）.outerHeight（真）；
$（“#调试_数据”）.html（“”）；
$（“#调试_数据”）。追加（标题高度：“++$（“#站点_标题”）。outerHeight（true）+“px”；
$（“#调试#u数据”）。追加（“#站点#u内容高度：”++$（“#站点#u内容”）。outerHeight（true）+“px”；
$（“#调试#数据”）。追加（总内容高度（页眉+站点内容总和）-“altura#u conteudo”值：“+altura#u conteudo+”px”；
$（“#调试#数据”）。追加（总内容高度的预期值（标题+#站点#内容和）-原始元素值“++$（“#站点#标题”）。outerHeight（true）+“px+”++$（“#站点#内容”）。outerHeight（true）+“px”；
$（“#调试_数据”）。追加（视口窗口高度：“+altura_视口+”px”；
$（“#调试数据”）。追加（页脚高度：“+altura_rodape+”ps”；
//在阿尔图拉（tamanho do footer）附近，领班Maioresque o tamanho da altra do conteúdo（ou seja，sobrar espaço）
if（altura_conteudo>（altura_视口-altura_rodape））
{
$（'site_footer'）.css（'position'，'static'）；
}
其他的
{
$（'site_footer'）.css（'position'，'fixed'）；
/*$（'site_footer'）.css（'bottom'，'0px'）*/
$（'site_footer'）.css（'top'，altura_viewport-$（'site_footer'）.outerHeight（））；
}
$（'debug_data'）.append（'p>位置属性>“+$（'site_footer'）.css（'Position'）+””）；
//脚掌固定对侧，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部，下半部
}
$（文档）.ready（页脚固定）；
$（窗口）。调整大小（页脚固定）；

问题是：当页面加载或调整大小时，调用函数“footer\u fix”；它计算内容大小是否小于视口大小减去页脚大小。因此，如果为true，则应用“位置：固定”CSS规则，并将“顶部”设置为视口大小减去页脚高度

但这并不像预期的那样有效。奇怪的是（对我来说，我没有使用jquery的经验），outerheight传递了意外的值，因此会发生错误计算，有时即使内容大于视口页脚大小，页脚也会被修复

这是一张解释这种行为的照片

编辑：事实上，当我调整窗口的大小时，footer\u fix函数可以正常工作，但在

$（document）.ready

中会出现不希望出现的行为。有关系吗

那么，我在哪里失败了？

获取高度：自动；从你的#site_content style开始，看看这是否解决了问题。

这只是一种预感，但是你正在创建的

#debug_data

div从零

标记开始，然后你在计算了

#site_content

的高度后，通过javascript插入其中6个标记。除非

#debug_data

div位于文档流之外，并带有类似于

position:absolute

的内容，否则这意味着调用

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

…不反映调用时文档的实际高度：

 if (altura_conteudo > (altura_viewport-altura_rodape))

…因为您已经通过添加那些额外的

标记更改了高度！这就解释了为什么代码在重新调整大小时会像预期的那样工作——在计算高度时，页面上总是有6个标签

如果是这种情况，修复程序可能会完全定位调试分区。

不会改变任何东西。我编辑问题是为了添加注释：只有在

$（document.ready（）

中调用页脚修复程序时，才会出现这种行为。当我调整窗口大小时（然后在

$（window.resize（）

）中再次调用该函数），它会正常工作。哇！非常感谢你！我不敢相信我犯了这样的错误！我真丢脸！那么，有没有办法在事件中检测这样的jquery/javascript行添加？文本区域的大小如何（如果需要的话，我可以打开另一个问题）？不用担心，它会发生的。至于您的问题，请检查，但要小心，在正确答案

DOMNodeInserted

中标记的事件实际上已被弃用。您可能会考虑Windows .MutualVistor，但浏览器支持不太大。

 if (altura_conteudo > (altura_viewport-altura_rodape))