javascript - 调整大小、CSS 解决方案或仅使用 Javascript 时绝对 div 重叠兄弟？

Question

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

html:

<div id="sidebar">
    <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        ...     
    </ul>
    <div id="bottom_element">
        <p>I am a bottom element</p>
    </div>
</div>

CSS:

#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;
}

代码示例:jsfiddle .使用 jquery 更新代码:fiddle非常感谢您的帮助。

Answer 1

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

*, *:before, *.after {
  box-sizing: border-box;
}

#sidebar {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 200px;
    background: #ddd;
    overflow: auto;
}

.wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
.page-row {
    display: table-row;
    height: 0;
}
.page-row-expanded {
    height: 100%;
}

.bottom div {
    background-color: #bbb;
    padding: 15px;
}

<div id="sidebar">
  <div class="wrapper">
    <div class="page-row page-row-expanded">
      <div>
        <ul>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>			
        </ul>
      </div>
    </div>

    <div class="bottom page-row">
      <div>
        Bottom element
      </div>
    </div>
  </div>
</div>