css - 在有和没有溢出的情况下将 div 锚定到另一个 div 的底部

Question

我想将一个 div 锚定到另一个具有固定高度并应用了 overflow:scroll 的 div 的底部，但前提是没有溢出。如果 div 溢出，那么我希望页脚随流。

目前，如果没有溢出内容，我的 fiddle 就可以工作。一旦出现溢出，页脚就会与内容重叠并从“底部”位置开始滚动。

HTML:

<table style="table-layout:fixed; width:675px; text-align:left;">   
    <tr>
        <td colspan="4" style="height:100%;">
            <div class="content">
                <div >
                    content<br/>                
                </div>
                <div class="footer">
                    foot on the bottom unless overflow then stay within flow
                </div>
            </div>
        </td>
    </tr>
</table>

CSS:

.content
{
    width:100%; 
    overflow:scroll; 
    overflow-x:hidden; 
    height:200px; 
    position: relative;
}

.footer
{
    height:10px;
    position:absolute;
    bottom:10px;
}

为了查看问题，剪切并粘贴“内容”，直到导致内容溢出。

Fiddle

Answer 1

我认为没有纯 CSS 解决方案，因为页脚的定位是有条件的，即当 .content 的内部内容 < 200px 时为绝对位置，而当 .content 为正常位置时为相对位置.content 的内部内容 > 200px。

这是一个使用 jQuery 的解决方案:

$(function(){
    var contentHeight = $('.content').height();
    var overflowHeight = $('.content > div').height();

    if (overflowHeight > contentHeight) {
        $('.footer').css({
            'position': 'relative',
            'bottom': 0
        });
    } else {
        $('.footer').css({
            'position': 'absolute',
            'bottom': '10px'
        });
    }
});

在这里查看 fiddle :http://jsfiddle.net/YmAgv/