html - 任何人都有在溢出自动触发时在滚动条外的 div 上设置边距的想法？

Question

所以我有一个高大的列 div、一个内容 div、空白区域和一个绝对到底部的 div。

当浏览器调整到一个较短的高度时，我希望 overflow: auto 在内容 div 上触发。这工作正常，但我试图使绝对底部 div 变得聪明，所以滚动条总是在底部 div 之上。

我正在使用 Gumby 框架进行列管理和样式设置，因此我的 JSFiddle 运行不佳，但我会发布图片以更好地了解我的问题所在。

以我目前的声誉，我只能发布两个链接而不能发布图片，所以我只能发布两个。假设我这里有一张照片，下面的图像在高处工作正常，拉伸(stretch)到最大高度并停止。

http://i.stack.imgur.com/0nt0o.png这是我想要它做的照片处理。内容 div 需要在 float 在底部的绝对 div 的顶部结束。

http://i.stack.imgur.com/VL5Eh.png但相反，它激活溢出:自动方式很晚，到目前为止我还没有想到会将它推到容器底部的更高位置。

---

编辑:下次我会花时间重建一个 fiddle 。表述这个问题的一种更简单的方式是:是否有纯 CSS 方式让元素在计算高度时考虑“position: absolute”元素？自从发布这篇文章以来，我做了更多的研究，但似乎没有。因此，我将只使用 javascript 将顶部元素的高度修改为 [100% - 绝对元素]。感谢您的回答尝试!

---

编辑 #2:对于一个额外的 hacky-only CSS3 解决方案，height: calc(100% - 100px);工作了。

Answer 1

让我们简单点，把它全部包裹起来，没有绝对定位。高级搜索按钮选项被其上方的搜索下推。高度基于百分比，min-height 防止容器变得太小。

CSS/HTML/演示

html,
body {
  height: 100%;
  margin: 0;
}
#search-wrap {
  width: 300px;
  height: 50%;
  min-height: 200px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  background: #CCC;
  border-bottom: solid 1px #000;
  padding: 10px;
}
#search-simple {
  overflow-y: scroll;
  height: 80%;
}
#search-advanced a {
  display: block;
  background: #F00;
  padding: 10px;
  color: #FFF;
}

<div id="search-wrap">
  <div id="search-simple">
    <ul>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
      <li>Sample</li>
    </ul>
  </div>
  <div id="search-advanced">
    <a href="#">Advanced Search</a>
  </div>
</div>

还有一把 fiddle - Fiddle link !