0

我想将一个 div 锚定到另一个 div 的底部，该 div 具有固定的高度并且溢出：滚动应用于它，但前提是没有溢出。如果 div 溢出了，那么我希望页脚能够随波逐流。

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

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;
}

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

小提琴

4

1 回答 1

2

我不认为有一个纯 CSS 解决方案，因为页脚的定位是有条件的，即当.content' 的内部内容为 < 200 像素时为绝对位置，而当 ' 的内部内容为 > 200 像素时，则为正常流动/相对位置.content。

这是使用 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'
        });
    }
});

在这里看小提琴：http: //jsfiddle.net/YmAgv/

于 2013-08-25T02:28:35.837 回答