html - No content just background , why is there a scroll bar? -
i stuck on small issue im having on website.
whenever add viewport html , creates scroll bar though theres no content overflowing.
i using bootstrap css framework.
body { /* location of image */ background-image: url(http://www.haristechnology.com/images/footer_lodyas.png); /* background image centered vertically , horizontally @ times */ background-position: center center; /* background image doesn't tile */ background-repeat: no-repeat; /* background image fixed in viewport doesn't move when content's height greater image's height */ background-attachment: fixed; /* makes background image rescale based on container's size */ background-size: cover; /* set background color displayed while background image loading */ } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navbar-default .navbar-brand { color: rgba(255, 255, 255, 1); } .navbar-default { font-size: 26px; background-color: rgba(0, 0, 0, 1); border-width: 0px; border-radius: 0px; } .navbar-default .navbar-nav>li>a { color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(12, 245, 229, 0.59); } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: rgba(20, 250, 39, 1); background-color: rgba(0, 0, 0, 1); } .navbar-default .navbar-toggle { border-color: #000000; } .navbar-default .navbar-toggle:hover, #nav.navbar-default .navbar-toggle:focus { background-color: #000000; } .navbar-default .navbar-toggle .icon-bar { background-color: #000000; } .navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar { background-color: #000000; } .custom{ margin-top:15%; } this html
<head> <meta charset="utf-8"> <title> haristechnology</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/animate.css"> <link href='http://fonts.googleapis.com/css?family=muli' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <link href="//www.google-analytics.com" rel="dns-prefetch"> <link href="http://haristechnology.com/wp-content/themes/html5blank-stable/img/icons/favicon.ico" rel="shortcut icon"> <link href="http://haristechnology.com/wp-content/themes/html5blank-stable/img/icons/touch.png" rel="apple-touch-icon-precomposed"> <meta name="description" content="haristechnology – website"> <script type="text/javascript"> window._wpemojisettings = {"baseurl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/haristechnology.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}}; !function(a,b,c){function d(a){var c=b.createelement("canvas"),d=c.getcontext&&c.getcontext("2d");return d&&d.filltext?(d.textbaseline="top",d.font="600 32px arial","flag"===a?(d.filltext(string.fromcharcode(55356,56812,55356,56807),0,0),c.todataurl().length>3e3):(d.filltext(string.fromcharcode(55357,56835),0,0),0!==d.getimagedata(16,16,1,1).data[0])):!1}function e(a){var c=b.createelement("script");c.src=a,c.type="text/javascript",b.getelementsbytagname("head")[0].appendchild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.domready=!1,c.readycallback=function(){c.domready=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readycallback()},b.addeventlistener?(b.addeventlistener("domcontentloaded",g,!1),a.addeventlistener("load",g,!1)):(a.attachevent("onload",g),b.attachevent("onreadystatechange",function(){"complete"===b.readystate&&c.readycallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojisettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='mcafeesecure_css-css' href='http://haristechnology.com/wp-content/plugins/mcafee-secure/assets/common.css?ver=1.0' media='' /> <link rel='stylesheet' id='normalize-css' href='http://haristechnology.com/wp-content/themes/html5blank-stable/normalize.css?ver=1.0' media='all' /> <link rel='stylesheet' id='html5blank-css' href='http://haristechnology.com/wp-content/themes/html5blank-stable/style.css?ver=1.0' media='all' /> <script type='text/javascript' src='http://haristechnology.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script> <script type='text/javascript' src='http://haristechnology.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> <script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/mcafee-secure/assets/common.js?ver=1.0'></script> <script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script> <script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script> <script type='text/javascript' src='http://haristechnology.com/wp-content/themes/html5blank-stable/js/scripts.js?ver=1.0.0'></script> <link rel="shortcut icon" href="http://haristechnology.com/wp-content/uploads/2015/05/favicon.ico"/> <style type="text/css"> .screen-reader-response { display: none; } </style> <script> conditionizr.config({ assets: 'http://haristechnology.com/wp-content/themes/html5blank-stable', tests: {} }); </script> </head> <body class="home page page-id-34 page-template-default logged-in index"> <div class="container"> <div class="col-md-12"> <div class="row"> <div style="background-color:transparent;border:0px;border-radius:0;margin-top:-1%;width:100%; height:25%;"class="well"> <!--navigation starts --> <div style="margin-top:1%;"id='nav'> <img class="animated bounceinup" src="images/banner.png" style="width:100%;" /> <br> <br> <nav class="navbar navbar-default animated fadein" role="navigation"> <div class="navbar-header"> <button type="button" style="background-color:#ff1919 !important;" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.haristechnology.com/">haristechnology</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul id="menu-default" class="nav navbar-nav"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-34 current_page_item menu-item-36 active"><a title="home" href="http://haristechnology.com/">home</a></li> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a title="products" href="http://haristechnology.com/productspage">products</a></li> <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a title="contact" href="http://haristechnology.com/contact-2">contact</a></li> </ul> </div> </div> </nav> <!--navigation ends --> <!--content starts --> <!-- /header --> <div class="jumbotron" style="margin-left: 0%; border-radius: 0; margin-top: 0%; width: 100%;"> <h1>hello</h1> </div> <div style="background-color:#aaf200;margin-left:0%;border-radius:0;margin-top:0%;width:100%"class="jumbotron"> <center> <h2> website under construction. </h2> </center> </div> <h3 class="pull-right" style="color:#cde2bd;">developed haristechnology.</h3> <!--footer ends --> </div> </div> </div> </div> </body> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="scripts/bootstrap.min.js"></script> <script type="text/javascript"> (function() { var sa = document.createelement('script'); sa.type = 'text/javascript'; sa.async = true; sa.src = ('https:' == document.location.protocol ? 'https://cdn' : 'http://cdn') + '.ywxi.net/js/1.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(sa, s); })(); </script> <script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript'> /* <![cdata[ */ var _wpcf7 = {"loaderurl":"http:\/\/haristechnology.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"sending ..."}; /* ]]> */ </script> <script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.2'></script> <script type='text/javascript' src='http://haristechnology.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/scripts.min.js?ver=1.1.0'></script> <!-- analytics --> <script> (function(i,s,o,g,r,a,m){i['googleanalyticsobject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new date();a=s.createelement(o), m=s.getelementsbytagname(o)[0];a.async=1;a.src=g;m.parentnode.insertbefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'ua-62813338-1', 'auto'); ga('send', 'pageview'); </script> <script type="text/javascript"> (function() { var sa = document.createelement('script'); sa.type = 'text/javascript'; sa.async = true; sa.src = ('https:' == document.location.protocol ? 'https://cdn' : 'http://cdn') + '.ywxi.net/js/1.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(sa, s); })(); </script> </html> any appreciated.
note: problem happening in chrome far , not internet explorer?
it's div#nav. when animate logo bottom, chrome isn't calculating height , you're getting ton of overflow @ bottom of document.
in css div#nav, add overflow: hidden; , problem go away.
Comments
Post a Comment