html - 使用显示器时溢出不起作用 :table-cell

Question

我想做的是从底部对齐另一个div中的div。我现在的代码是:

#container{
height: 375px;
display: table-cell;
width: 660px;
vertical-align: bottom;
margin:none;
overflow-y:auto;    
}

#container > div{
margin:none;
width:660px;
}

这似乎有效。但是，当容器 div 内的内容增加时，容器的高度也会增加，尽管我设置了固定高度并将溢出-y 设置为自动。我应该怎么做才能让它发挥作用？

JsFiddle:http://jsfiddle.net/qNw7E/1/

Answer 1

我已使用绝对定位来尝试解决您的问题 - fiddle here 。即使添加更多行内容，容器的高度也将保持不变，并且会出现滚动条。

CSS 很简单:

#container {
    width: 660px;
    height: 375px;
    position: relative;
    background: #eee;
    overflow: hidden;
}

#container .content {
    width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: scroll;
}

主容器具有设定的高度并隐藏任何溢出。里面的内容div绝对定位到这个div的底部，并且永远不能超过主容器的高度。如果它达到主容器高度的 100%，则会出现滚动条。

尝试添加更多内容，您将看到滚动条出现。