Отрегулируйте высоту окна по клику

Question

У меня есть div #more с шириной 100% и высотой auto, который оборачивает мое содержимое.

Я хочу, чтобы размер div изменился, чтобы настроить высоту окна при нажатии на ссылку.

Мой сценарий почти работает, я нажимаю на ссылку и вижу, что полоса прокрутки становится меньше (доказательство того, что размер окна изменился, но div изменяет размер только после первого действия прокрутки... почему?:(

SCRIPT

$(document).ready(function(){
            $( "#target" ).click(function(){
  function resizeSection(tag) {
    var docHeight = $(window).height();  // Get the height of the browser window
    var docWidth = $(window).width();    // Get the width of the browser window
    $(tag).css({'height': docHeight + 'px', 'width': docWidth + 'px', 'display': 'block'});
  }
  $('#more').each(function(){  
    resizeSection(this);  // Call the function and make sure to pass 'this'
  });
  $(window).resize(function() {
    $('#more').each(function(){
      resizeSection(this);
    });
  });
});
});

И это триггер: <div id="target">click</div>

Answer 1

Я нашел хороший способ сделать это, и контейнер изменяет размеры, чтобы соответствовать высоте окна, очень гладкой и приятной.

$('.more').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION - maximize the container to fit window
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION - minimize the container to a predifined size   
        d.height = 500px;            
        isFullscreen = false;
    }

    $(this).animate(d,speed)
    })

Answer 2

Во -первых: поместите больше div в начало тела. если я вас понимаю, вам не нужна каждая функция на одном элементе. попробуй это. это нормально работает, если это то, что вы хотите

$( "#click" ).click(function() {
    //with outerHeight and width you get size including margin and padding       
    var docHeight = $(document).outerHeight(true);  // Get the height of the document window
    var docWidth = $(document).outerWidth(true);    // Get the width of the document window

    $('#more').css({

      "width": docWidth + "px",
      "height": docHeight + "px",
      "position": "absolute",//if this div is main container you don't need this 
      "top" :0,//and this 
      "left": 0,//and this
      "z-index": 1111//and this


    });

});