11548 sujets

JavaScript, DOM et API Web HTML5

Redimmensionnement en hauteur .resize

Bonjour à tous,

J'ai réalisé un petit script pour redimmensionner ma page en fonction de la taille de mon navigateur, tout fonctionne correctement pour la largeur mais pour la hauteur...
Quand j'agrandi ma fenêtre (en hauteur) ça "resize" bien mais quand je la réduit, ça me met une scroll bar.

mon code : 

<body>
<div id="screen">
    <div id="desktop">
        <div id="app_screen">
        </div>
        <div id="main_menu">
            <ul>
               [...]
            </ul>
        </div>
    </div>
    <div id="taskbar">
        <a href="#" id="main_menu_button">Menu</a>
        <a href="#" id="display_desktop"></a>
    </div>
</div>
</body>


mon css : 

*{margin:0;padding:0;}
.clear{clear:both;width:0;border:0;}

#screen{
    background:orange;
    min-width:800px;
    width:100%;
    /*height:100%;*/
    /*min-height:200px;*/
}

#desktop{
    width:100%;
    position:relative;
}
#desktop #app_screen{
    width:100%;
}
#taskbar{
   height:29px;
   width:100%;
   border-top:1px solid black;
   background:url('../images/taskbar.png') 0 0 repeat-x;
}


et mon JS : 

$(document).ready(function(){
    function resizeContent(){
        var _total_width = $('body').width();
        var _total_height = $('body').height();
        console.log(_total_height);
        
        if(_total_width<800){
            $('#screen').width(800);
            $('#desktop').width(800);
            $('#app_screen').width(800);
        }
        if(_total_height<200){
            $('#screen').height(200);
            $('#desktop').height(200-30);
            $('#app_screen').height(200-30);
        }
        
        $('#screen').width(_total_width);
        $('#screen').height(_total_height);
        $('#desktop').width(_total_width);
        $('#desktop').height(_total_height-30);
        $('#app_screen').width(_total_width);
        $('#app_screen').height(_total_height-30);
    }
    resizeContent();
    $(window).resize(function(){
        resizeContent();
    });
});


merci d'avance!
autant pour moi il suffisait de remplacer

var _total_height = $('body').height();

par

var _total_height = $(window).height();
Sujet clos
Aller à