如何底部对齐可以增长的div并使其容器滚动

Question

我试图让这个布局没有javascript发生.

我有一个父div和一个子div,其中包含不断追加的内容.我希望孩子在父母内部对齐并垂直生长.我还希望父级div在子级的高度>父级的高度时滚动.

第一部分非常简单:

#child { position:absolute; bottom: 0 }

第二部分很难,因为绝对定位的元素在内容流之外并且不会触发滚动.

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

Answer 1

编辑表明它是可能的

事实证明,可以在不使用javascript的情况下提供所描述的动态布局.有一种方法(仅使用CSS)将div底部对齐,当它溢出它的父级时会导致滚动.

诀窍是让滚动发生在孩子身上,将其最大高度设置为100%(即父母身高),然后在底部对齐孩子position:absolute;.您只需要确保父母有position:relative or 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%;
}

这反映在以下jsfiddle中:http://jsfiddle.net/epgdn/5/ 只需调整运行窗口的大小,直到子节点大于父节点,父节点将适当滚动.