1

我正在创建一个页面，我的页脚在某个事件上增长。我的问题是让页脚根据我有多少空间增长。请参阅我的代码或 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>
4

1 回答 1

1

您可以简单地计算前一个元素的高度并找到该元素的高度，而不是计算之前所有元素的空间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值来实现。演示在这里

于 2013-08-27T13:22:37.243 回答