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为auto。我该怎么做才能让它发挥作用？

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

Answer 1

你的问题是CSS规范很清楚溢出不适用于表格单元格，浏览器会忽略它。您可以更好地为对齐元素使用内联块，并在父级上设置vertical-align:bottom。您也可以在每个TD中使用嵌套div，但这仍然很棘手，因为100％的高度在表格单元的子节点中也不起作用。

当你考虑它时，它实际上是有道理的。表格细胞应该按比例缩放以适合他们的孩子，而不是相反。

Answer 2

我使用绝对定位来尝试解决您的问题 - 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％，则会出现一个滚动条。

尝试添加更多内容，您会看到滚动条显示。

Answer 3

在这里工作演示或 jsFiddle （注意：我更新了一些你的html格式）。

HTML

<div style="margin-bottom:50px;">
    <div id="container">
        <div class="hack-overflow">
            <div class="data">you data here</div>
        </div>
    </div>
</div>


<div>
    <div id="container">
        <div class="hack-overflow">
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
            <div class="data">you data here</div>
        </div>
    </div>
</div>

CSS

#container{
    height: 375px;
    display: table-cell;
    width: 660px;
    vertical-align: bottom;
    margin:0 0 30px 0;
    background-color:#9C0;  
}

#container .hack-overflow{
    width:100%;
    height:auto;
    overflow:hidden;
    overflow-y:auto; 
    max-height:375px
}

#container .data{
    margin:0;
    width:660px;
    height:50px; 
    background-color:#F90; 
    border:#333 1px solid;
}

使用display：table-cell时溢出不起作用

3 个答案:

HTML

CSS