當內容更改高度時，動態更改容器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的高度

回答

相關問題