Question

我在固定位置div中有可变高度的内容。就我而言，它是一个表，它会添加行。我需要它在div的底部排成一行，我通过使内容位置绝对底部为0来完成。

<div id="outer">
  <div id="inner">
    <table border="1">
      <tr>
        <td>BlahBlahBlah</td>
      </tr>
      <!-- Add more rows here. -->
    </table>
  </div>
</div>

#outer {
  position: absolute;
  top: 16px;
  left: 64px;
  right: 64px;
  bottom: 128px;
  padding-bottom: 16px;
  background: #EEEEEE;
}

#inner {
  position: absolute;
  top: 0px;
  left: 32px;
  right: 32px;
  bottom: 16px;
  overflow-y: auto;
}

table {
  width: 100%;
  /**
  This aligns content to the bottom,
  but there's never a scrollbar.*/
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/2g1kLd5g/

如果我添加内容，它仍然排在底部，但最终内容会比div更高。在这种情况下，新内容溢出div的顶部，无法看到。

http://jsfiddle.net/rs7ewqdu/

因此，我想要一个滚动条，以便用户可以向上滚动以查看隐藏的内容。如果我删除绝对定位并在父div上保留overflow-y auto，那么我有一个滚动条，但它总是从顶部位置开始，每次加载页面时都必须向下滚动。

http://jsfiddle.net/oncqwq9o/

可以（不理想）通过JavaScript自动滚动来解决。然而，这里的真正问题是，如果我缩短内容，它现在不再排在div的底部。

http://jsfiddle.net/1wnqbgbo/

#inner {
  position: absolute;
  top: 0px;
  left: 32px;
  right: 32px;
  bottom: 16px;
  overflow-y: auto;
  vertical-align: bottom;
  display: table-cell;
}

垂直对齐似乎没有任何效果，我尝试显示：table-cell和display：block。我发现获得所需对齐的唯一方法是使用绝对位置，当我这样做时，没有滚动条。

有没有人知道如何让内容的底部默认与div的底部对齐，并有一个滚动条来处理溢出？如果有的话，我更喜欢纯CSS解决方案。

垂直对齐Div的内容与滚动条溢出

0 个答案: