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

我有一个网站有不同的部分，每个部分都设置为浏览器窗口的高度。在某些情况下，内容比浏览器窗口更高，我用一个函数来检查这一点，并设置div的高度是其内容的高度，使用功能：当内容更改高度时，动态更改容器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/

来源

2013-04-23 Michael Peterson

为什么不使用'css'的'min-height'，你可以通过'js'设置它 – Valerij 2013-04-23 05:02:54

我试着用js设置'min-height'，但没有成功。也许我把它弄错了？ – 2013-04-23 05:04:05

只要给高度自动 – PSL 2013-04-23 05:05:08

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

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

来源

2013-04-23 05:06:29

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

回答

相关问题