css - html document scrolls with no overflow -
the outermost element, html tag, in documents height set 100%. note, body tag's height 100%.
i assume means height of document equals height of window.
however, document still scrolls little bit on y-axis. document's height 1049.550px, while window's height 1049px. if scroll bottom of window, window's scrolly 63px.
i don't want set documents overflow hidden, because ever place @ absolute bottom of document gets truncated.
i using chrome browser. have tried in safari.
here index.html
<!doctype html> <html lang="en" ng-app="my-app" style="height: 100%;"> <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_hangout_icon"><img onclick="goto('create_hangout')" 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> and here main style sheet main.css
#app_body { background-color: #178dba; background-image: url('/2048.jpg'); height: 100%; } .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_hangout_icon img { display: none; margin-right: 5%; float: right; }
just remove height:100% #menu , #app_body. scroll bar show when have lot of content on page.
html css
No comments:
Post a Comment