使用jquery/css使页脚增长

make footer grow with jquery/css

本文关键字：jquery css 使用      更新时间：2023-09-26

我正在创建一个页面，其中我的页脚在某个事件上增长。我的问题是根据我得到的空间来增加页脚。请参阅我的代码或jsFiddle。我希望灰色的页脚一直增长到具有动态高度的彩色元素（而不是像现在这样，增长到20%）。我想我可以数出上面所有元素的高度，但这听起来不是一个好的解决方案。

jsFiddle此处

            <html>
            <head>
                <style type="text/css">
                    body #pagePlaceHolderOuter {
                        background: #FFFFFF;
                        height: 100%;
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                        body #pagePlaceHolderOuter #pagePlaceHolderInner {
                            height: 100%;
                            margin: 0 auto;
                            max-width: 1000px;
                            min-width: 700px;
                            width: 70%;
                            position: relative;
                        }
                            body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 {
                                width: 100%;
                                height: 100px;
                                background: blue;
                            }
                            body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 {
                                width: 100%;
                                height: 120px;
                                background: green;
                            }
                            body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 {
                                width: 100%;
                                height: 60px;
                                background: red;
                            }
                            body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
                                background: gray;
                                bottom: 0;
                                height: 10%;
                                position: absolute;
                                width: 100%;
                            }
                </style>
            </head>
            <body>
                <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
                <script>
                    $("#btn").click(function () {
                        $('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%');
                    });
                </script>
                <div id="pagePlaceHolderOuter">
                    <div id="pagePlaceHolderInner">
                        <button type="button" id="btn">Click Me!</button>
                        <div class="div1">I have a dynamic height</div>
                        <div class="div2">I have a dynamic height</div>
                        <div class="div3">I have a dynamic height</div>
                        <div class="footer">Footer</div>
                    </div>
                </div>
            </body>
            </html>

您可以简单地计算前一个元素的高度并找到该元素的offset().top，而不是计算前所有元素的空间。使用这种方法，我计算了空间（你必须确保HTML中的页脚直接在前一个元素之后，或者稍微重组我的jQuery），基本上你只需要在默认值和默认值+空间之间切换更新的jsFiddle

$("#btn").click(function (e) {
    var prev = $('.footer').prev(),
        winHeight = $(window).height(),
        calcTop = $('.footer').height() == Math.round(winHeight / 10) ? 
            (winHeight - prev.offset().top - prev.height()) : "10%";
    $('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css({
        'height': calcTop
    });
});

附带说明一下，我使用CSS转换来"动画化"更改，而不是jQuery来解决性能问题和易于编辑

如果只想改变位置而不是高度，可以通过切换bottom值来实现此处的演示

相关文章：