Jquery $（窗口）。调整大小功能导致div消失
在我的设计中，我希望在重新调整浏览器（firefox）的大小时，能够看到按钮。按钮位于相对DIV中，当高度太小时，它会将DIV设置为绝对。但在重新调整窗口大小时，DIV会闪烁并随机消失/出现 这是我的代码：Jquery $（窗口）。调整大小功能导致div消失,jquery,firefox,position,window-resize,Jquery,Firefox,Position,Window Resize,在我的设计中，我希望在重新调整浏览器（firefox）的大小时，能够看到按钮。按钮位于相对DIV中，当高度太小时，它会将DIV设置为绝对。但在重新调整窗口大小时，DIV会闪烁并随机消失/出现 这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title>
<!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>
身体{
/*溢出：隐藏*/
边框：2件点浅蓝色；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：0；
填充：0；
}
maxheight先生{
最大高度：100%；
/*溢出：隐藏*/
}
.可滚动{
溢出：自动；
身高：100%；
背景颜色：黄色；
边框：1px纯黑；
位置：相对位置；
最大高度：100%；
底部：0px；
}
.按钮{
背景色：红色；
边框：1px纯黑；
位置：相对位置；
底部：0px；
}
$（窗口）。调整大小（函数（）{
var pageHeight=$（“#page”）.height（）；
变量按钮=$（“.buttons”）；
var elementHeight=$（按钮）.height（）
var elementTop=$（按钮）.position（）.top；
var总计=页面高度-（elementHeight+elementTop）；
如果（页面高度-（元素高度+元素顶部）<0）{
$（按钮）.css({
'位置'：'绝对'，
'宽度'：$（“.scrollable”）.width（）
});
}否则{
$（按钮）.css({
'位置'：'相对'，
'宽度'：$（“.scrollable”）.width（）
});
}
});
标题
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
测试
测试
topif (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()
});
}
下面是一个稍微有效的解决方案，它简化了对以下各项的调用：
$(window).resize(function () {
$('.buttons').fixToBottom().css('width', $('.scrollable').width());
});
$(window).resize(function () {
$('.buttons').fixToBottom().css('width', $('.scrollable').width());
});