0

我有一个包含不同部分的网站，每个部分都设置为浏览器窗口的高度。在某些情况下，内容比浏览器窗口高，我使用一个函数来检查这一点，并将 div 的高度设置为其内容的高度，使用以下函数：

$('.container').each(function() {
        var _this = $(this);
        var this_ = this;
        var windowH = $(window).height();
        var textH = $('.text', this).height();
        if(windowH < textH) {                            
            $(this).css({'height': textH + 'px'});
        }
        else {
            $(this).css({'height': windowH + 'px'});
        }
        $(window).resize(function(){
            var windowH = $(window).height();
            var textH = $('.text', this_).height();
            if(windowH < textH) {
                _this.css({'height': textH + 'px'});
            }
            else {
                _this.css('height', windowH + 'px');
            }

        });         
    });

我遇到的问题是我想动态隐藏和显示内容，当新内容高于 div 的当前高度时，我希望 div 扩展以包含它。我正在使用该功能，

$('#container').on('click', 'p', function () {
    $(this).height('300px');
    var windowH = $(window).height();
    $('#container').css({
        'height': ($('#container .text').height() + 'px')
    });
    var textH = $('#container').height();
    if (windowH < textH) {
        $('#container').css({
            'height': textH + 'px'
        });
    } else {
        $('#container').css('height', windowH + 'px');
    }

});

但没有成功。我创建了一个小提琴，http://jsfiddle.net/wDRzY/

4

1 回答 1

1

使用嵌套 div，限制外部 div 的高度，让内部 div 保持内容的高度。当需要外层div作为内容的高度时，可以设置外层div高度等于内层div高度。

虽然，我不确定你为什么需要这样做。我建议多阅读 CSS 并将其用于这样的显示目的。

于 2013-04-23T05:06:29.630 回答