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

这是一个稍微有效的解决方案，可以简化对以下的调用：

$(window).resize(function () {
    $('.buttons').fixToBottom().css('width', $('.scrollable').width());
});

小提琴：http: //jsfiddle.net/XVNQk/

于 2013-08-06T13:46:22.103 回答
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中添加了一个，.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 回答