Question

我创建了一个页面，我的页脚在特定事件中正在增长。我的问题是根据我得到多少空间使页脚增长。看我的代码或jsFiddle。我希望灰色页脚一直生长到具有动态高度的彩色元素（而不是像现在一样，达到20％）。我想我可以计算所有元素高度，但这听起来不是一个好的解决方案。

jsFiddle here

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

Answer 1

您可以简单地计算前一个元素的高度，然后找到该元素的offset().top，而不是计算之前所有元素的空间。使用这种方法我计算了空间（你必须在你的HTML中确保页脚直接在前一个元素之后或稍微重构我的jQuery）并且基本上你只需在默认值和默认值+空格之间切换它。 Updated 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值来实现。 Demo of that here

使用jquery / css制作页脚

1 个答案: