Question

我需要在屏幕的左下角说一个HTML元素，所以我给了它：

position:fixed;
bottom: 0;
left:0;

我还希望能够使元素更高，以便它从底部延伸到任何高度。问题是当我把它作为position:fixed;时，jQuery的resizeable()句柄将导致它跳转，如this问题中所述。解决方案是将位置更改为绝对位置，但现在的问题是元素不再固定在窗口的底部。我怎么能同时拥有这两个？

JSFiddle: Resize Yes, Fixed Position No

JSFiddle: Resize Yes, Fixed Position Yes, Jumping Yes

Answer 1

使用position: absolute时，元素将作为父元素的引用。因此，如果您要放置的元素位于具有特定大小的div内，则不会超出此div。

尝试将您希望保留的此元素作为body标记的子项保留。

修改

但无论如何，如果你滚动页面元素将不会保持固定（如果这是你想要的）

Answer 2

一个选项可以是使用绝对位置，然后执行类似

的操作

$.fn.set_bottom = function(div){  
   var h = $(window).height();
   var elem_h = $("#"+div).height();
   var et = h - elem_h;
   $("#"+div).css("top" , et+"px");
};

$(document).ready(function(){
   $(this).set_bottom("bottom-div");
   $(window).resize(function(){
     $(this).set_bottom("bottom-div");
  });
});

可能不是最好的解决方案。但是会奏效。

位置：固定或可调整大小但不是两者

2 个答案: