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

余談ですが、パフォーマンスの問題と編集の容易さのために jQuery ではなく、CSS トランジションを使用して変更を「アニメーション化」しました。

高さではなく位置だけを変更したい場合は、bottom代わりに値を切り替えて変更できます。そのデモはこちら

于 2013-08-27T13:22:37.243 に答える