html - 我怎样才能底部对齐一个可以增长的 div 并导致它的容器滚动

Question

我试图在没有 javascript 的情况下实现这种布局。

我有一个父 div 和一个子 div，其中包含不断附加的内容。我希望 child 在 parent 内部底部对齐并垂直生长。当 child 的高度 > parent 的高度时，我还希望 父 div 滚动。

第一部分非常简单:

#child { position:absolute; bottom: 0 }

第二部分比较困难，因为绝对定位的元素在内容流之外，不会触发滚动。

父 div 跨越浏览器窗口的整个高度(我在设计时不知道)

Answer 1

经过编辑以表明这是可能的

事实证明，可以提供描述的动态布局，无需使用 javascript。有一种方法(仅使用 CSS)使 div 底部对齐，当它溢出它的父级时会导致滚动。

技巧 是让滚动发生在 child 身上，将它的最大高度设置为 100%(即 parent 的高度)，然后将 child 与 position:absolute; 底部对齐； 。您只需要确保父级具有 position:relative 或 absolute。

这是让它工作的简单 CSS:

#parent{
    position:absolute;
    /* these parts are obviously not necessary */
    width:500px;
    top:10px;
    bottom:10px;
}
#child{
    position:absolute;
    bottom:0px;
    right:0px;
    left:0px;
    overflow-y:auto;
    /* this is the key */
    max-height:100%;
}

这反射(reflect)在以下 jsfiddle 中:http://jsfiddle.net/epgdn/5/只需调整运行窗口的大小，直到子窗口大于父窗口并且父窗口将适本地滚动。