0

私のデザインでは、ブラウザ (Firefox) のサイズを変更するときにボタンを見えるようにしたいと考えています。ボタンは相対 DIV にあり、高さが小さすぎる場合は DIV を絶対に設定します。ただし、ウィンドウのサイズを変更すると、DIVがちらつき、ランダムに消えたり現れたりします。

これは私のコードです:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body {
                /*overflow: hidden;*/
                border:  2px dotted lightblue;
                position: absolute;
                top: 0;
                right:  0;
                bottom:  0;
                left:  0;
                margin:  0;
                padding:  0;
            }
            .maxheight {
                max-height:  100%;
                /*overflow:  hidden;*/
            }
            .scrollable {
                overflow:  auto;
                height:  100%;
                background-color:  yellow;
                border:  1px solid black;
                position: relative;
                max-height:  100%;
                bottom:  0px;
            }
            .buttons {
                background-color: red;
                border:  1px solid black;
                position: relative;
                bottom:  0px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(window).resize(function () {
                var pageHeight = $("#page").height();
                var buttons = $(".buttons");
                var elementHeight = $(buttons).height()
                var elementTop = $(buttons).position().top;
                var total = pageHeight - (elementHeight + elementTop);
                if (pageHeight - (elementHeight + elementTop) < 0) {
                    $(buttons).css({
                        'position': 'absolute',
                        'width': $(".scrollable").width()
                    });
                } else {
                    $(buttons).css({
                        'position': 'relative',
                        'width': $(".scrollable").width()
                    });
                }
            });
        </script>
    </head>
    <body id="page">
        <div class="maxheight">
            <h2>title</h2>
            <div class="scrollable">
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.<br />
                This is content.
            </div>
            <div class="buttons">
                <button type="button" value="test">test</button>
                <button type="button" value="test">test</button>
            </div>
        </div>
    </body>
</html>

フィドル: http://jsfiddle.net/GxDES/

4

2 に答える 2

0

ここにフィドルがあります

top問題の一部は、jquery で絶対および相対を設定していないと思います。絶対に切り替えると、どこに配置するかわからないため、ブラウザによって異なる場合があります。 

if (pageHeight - (elementHeight + elementTop) < 0) {
    $(buttons).css({
        'position': 'absolute',
        'top': elementTop + 'px',  //ADDED THIS LINE
            'width': $(".scrollable").width()
    });
} else {
    $(buttons).css({
        'position': 'relative',
        'top': '0px',  //ADDED THIS LINE
            'width': $(".scrollable").width()
    });
}

また、赤い背景を一貫して維持するためheightに、CSSにa を追加しました。.buttons

それが役立つことを願っています。

編集：

私は一つのことを変えます。の.buttons右下に配置します.scrollable。この方法で少しうまく機能します。 http://jsfiddle.net/GxDES/2/

var pos = $('div.scrollable').position().top + $('div.scrollable').height();
'top': pos + 'px',  //CHANGED THIS LINE
于 2013-08-06T13:27:09.760 に答える