html - Incorrect measurements: window.innerHeight > window.outerHeight -
i trying build app takes of view port.
however, window.innerheight incorrect, affecting styling; body tag's height equal window.innerheight, document scrolls (see screen shot below of body's inspection).
window.innerheight 1198 window.outerheight 893 obviously, these measurements wrong, because window.innerheight should less window.outerheight.
i using chrome, , took measurements using inspect element in window.
for additional information, have provided code below.
html doc
<!doctype html> <html lang="en" ng-app="my-app"> <head> <meta charset="utf-8"> <title>my-app</title> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/main.css"/> </head> <body id="app_body"> <div id="fb-root"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="js/auth.js"></script> <div id="menu"> <ul style="list-style-type: none;"> <li id="nav_close_menu_icon"><img src="./img/menu_icon.png" onclick="hidemenu()"/></li> </ul> <div class="clear"></div> <ul id = "menu_options"> <li id="logout_option" onclick="togglefbauthorizationstatus(); hidemenu();"><img id="logout_icon" src="./img/logout_icon.png"/>logout</li> </ul> </div> <ul class="nav"> <li><img id="nav_icon" src="./img/icon.png"/></li> <li id="nav_open_menu_icon"><img src="./img/menu_icon.png" onclick="showmenu()"/></li> <li id="nav_create_message_icon"><img onclick="goto('create_message')" src="./img/create_hangout_icon.png"/></li> </ul> <div id="template_container" style="height: 100%" ui-view></div> <!-- in production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> --> <script src="js/dynamic-ui.js"></script> <script src="js/ui.js"></script> <script src="js/bootstrap.js"></script> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="lib/angular-ui-router.js"/> <script src="https://cdn.goinstant.net/v1/platform.min.js"></script> <script src="https://cdn.goinstant.net/integrations/goangular/latest/goangular.min.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html> style sheet
html, body { margin: 0; height: 100%; } #app_body { background-color: #178dba; background-image: url('/2048.jpg'); } .nav { display: block; background-color: #363636; list-style-type: none; height: 6%; /*border-bottom: 0.1em solid #cccccc;*/ margin-bottom: 0em; padding: 0 0 0em; box-shadow: 0px 3px 5px #191919; } .clear { clear: both; } .center_horizontal { margin-right: auto; margin-left: auto; } #menu { position: absolute; right: 0px; z-index: 10; height: 100%; background-color: #272727; display: none; box-shadow: -1px 0px 5px #191919; } #menu_options { background-color: #272727; list-style-type: none; color: #ffffff; -webkit-user-select: none; font-weight: 200; } #menu_options li { height: 56px; } #logout_icon { width: 50px; height: 50px; margin-right: 5px; vertical-align: middle; } #logout_option { display: none; } .nav > li { display: inline; } #nav_icon { margin-left: 2% } #nav_open_menu_icon { float: right; margin-right: 3%; } #nav_close_menu_icon { float: right; } #nav_create_message_icon img { display: none; margin-right: 5%; float: right; }
you may utilize function viewport size. tested on ie4+, firefox, chrome, safari, opera.
var get_viewport_size = function(){ if(typeof(window.innerwidth) == 'number'){ my_width = window.innerwidth; my_height = window.innerheight; }else if(document.documentelement && (document.documentelement.clientwidth || document.documentelement.clientheight)){ my_width = document.documentelement.clientwidth; my_height = document.documentelement.clientheight; }else if(document.body && (document.body.clientwidth || document.body.clientheight)){ my_width = document.body.clientwidth; my_height = document.body.clientheight; } homecoming {width: my_width, height: my_height}; }; html css google-chrome
No comments:
Post a Comment