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

Question

我正在尝试在没有javascript的情况下进行此布局。

我有一个父div和一个子div，其中包含不断追加的内容。我希望孩子在父母内部对齐并垂直生长。当孩子的身高＆gt;我还想要父div来滚动父母的身高。

第一部分非常简单：

#child { position:absolute; bottom: 0 }

第二部分很难，因为绝对定位的元素不在内容流中，也不会触发滚动。

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

Answer 1

编辑以表明可能

原来可能提供所描述的动态布局，而不使用javascript 。有一种方法（仅使用CSS）使div底部对齐，当它溢出它的父级时会导致滚动。

技巧是让孩子进行滚动，将其max-height设置为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/只需调整运行窗口的大小，直到子节点大于父节点，父节点将适当滚动。

Answer 2

单独使用CSS无法实现此目的。如果您将孩子定位在top:0，那么您可以自上而下处理页面（滚动条也是如此）。

body { font-size:1.2em; height:50%; color:#735005; }
div { margin:0; padding:0; }
#parent {
    border:1px solid red;
    height:100%; max-height:400px;
    overflow:auto;
    position:relative;
    width:300px;
    }
#child, #child2 {    /* #child2 is STRICTLY here to illustrate the desired effect */
    border:1px solid blue;
    position:absolute;
    bottom:0;
    }
#child2 { visibility:hidden; top:0; }

  <div id="parent">
     <div id="child">scroll scroll scroll ... scroll scroll scroll scroll</div>
     <div id="child2">scroll scroll scroll ... scroll scroll scroll scroll</div>
  </div>

显然，您不希望为UI效果硬编码重复代码。需要服务器/客户端脚本。