0

高さが固定され、overflow:scroll が適用されている別の 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の内部コンテンツが < 200px の場合は絶対位置、 の内部コンテンツが > 200px の場合は通常のフロー/相対位置.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 に答える