2014-08-31 38 views
0

我有一個div #more,寬度爲100%,高度自動包裹了我的內容。點擊調整窗口高度

我想調整這個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>

回答

0

我發現使這種情況發生的一個很好的方式,與容器調整大小以適合窗口的高度非常光滑,惹人喜愛。

$('.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) 
    }) 
0
在第一

:把你的多格在初學者身體。 如果我明白你的理解,你不需要在一個元素上的每個功能。嘗試這個。它的做工精細,如果你想要什麼

$("#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 


    }); 

});