调整大小时的绝对div重叠同级、css解决方案还是仅使用Javascript？

尝试仅使用css（如果可能）修复侧栏中固定div底部的重叠绝对定位div。 虽然可以检测到这一点并用javascript修改绝对div的位置，但我想知道是否有一个更简单的只使用css的解决方案。 我试图将底部元素的高度填充添加到固定的父元素中，但在调整大小（垂直）时它会一直重叠- 因此，在（1）窗口太小或（2）列表太长的情况下，如何防止底部元素与无序列表重叠

html:

代码示例：。 使用jquery更新代码：

---

非常感谢您的帮助。

这里有一种方法可以帮助您继续前进，当ul列表中的项目很少时，“底部”元素始终位于底部，而当项目很多时，则底部元素被向下推，而不是与列表重叠

*，*：之前，*.之后{
框大小：边框框；
}
#边栏{
位置：固定；
右：0；
排名：0；
身高：100%；
宽度：200px；
背景：ddd；
溢出：自动；
}
.包装纸{
显示：表格；
宽度：100%；
身高：100%；
}
.第页行{
显示：表格行；
身高：0；
}
.页行已展开{
身高：100%；
}
1.底部div{
背景色：#bbb；
填充：15px；
}

列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

底部元素

我有一个类似的问题，在阅读了这篇文章（以及其他文章）后，我使用了这个解决方案

// divid is the ID of the element with position: absolute
function SetHeight(divid) {
  var divh = $("#"+divid).height();
// 36 is the maximum height before overlay occurs 
  if (divh > 36) {
    $("#"+divid).css("position", "relative");
  }
}

我希望它对其他人有所帮助。

---

这是我的第一篇帖子，所以如果我有问题，请原谅。

你希望它在哪里？我看了看html/css，它看起来像是按照css告诉它的那样运行。那么，预期的结果是什么呢？你能解释一下当前的行为与你希望发生的情况有什么不同吗？很抱歉，如果不清楚，我正在尝试停止重叠，并在固定div上有一个滚动条，如果有溢出-y，就好像绝对元素会变成相对的（我认为这可能是一种javascript方法）。谢谢。还不清楚，哪个元素与哪个元素重叠？因为底部元素具有绝对位置，所以它会从流中取出，当没有空间时，其他元素会滑到下面。在侧边栏上设置最小高度将在某种程度上防止这种情况。为什么将底部元素设置为绝对位置？谢谢@LGSon，不幸的是，这或多或少是我开始时的结果；底部元素的重叠部分。我真正想要实现的是，在我的问题中，它在更新的提琴中看起来是一样的，但是没有javascript，因为我希望得到一个只有css的解决方案。你希望底部元素被向下推，而不是停留并让侧边栏滚动？正确，只在侧边栏中底部固定，当它不与ul重叠时。

#sidebar {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 200px;
    background: #ddd;
    padding: 1em;
    padding-bottom: 100px;
}

#bottom_element {
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    background: #000;
    color: #fff;
    padding: 1em;
}

#sidebar > ul {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 1em;
}

// divid is the ID of the element with position: absolute
function SetHeight(divid) {
  var divh = $("#"+divid).height();
// 36 is the maximum height before overlay occurs 
  if (divh > 36) {
    $("#"+divid).css("position", "relative");
  }
}