Question

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

Answer 1

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

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

当内容改变高度时，动态改变容器div的高度

1 个答案: