Question

在我的设计中，我希望在重新调整浏览器大小时保持按钮（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/

Answer 1

这是FIDDLE

我认为部分问题不是在jquery中为绝对和相对设置top。当它切换到绝对值时，它不知道在哪里定位，因此根据浏览器的不同，它可能会有所不同。

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

我还在您的css height中添加了.buttons，以使红色背景保持一致并保持不变。

希望有所帮助。

编辑：

我改变了一件事。将.buttons放在.scrollable下方。通过这种方式工作得更好一点。 http://jsfiddle.net/GxDES/2/

var pos = $('div.scrollable').position().top + $('div.scrollable').height();
'top': pos + 'px',  //CHANGED THIS LINE

Answer 2

这是一个有效的解决方案，简化了对：

的调用

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

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

$（window）.resize函数导致div消失

2 个答案: