Menu
I am learning Bootstrap. On the getting started menu, there are few templates given. I am playing with that. One example is about fixed Footer. I used nav from previous example and wanted to adjust that with fixed footer. But vertical scrollbar is coming. I am looking for element which is causing Vertical Scroll Bar.
Here is HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by it's height */ margin: 0 auto -60px; } /* Set the fixed height of the footer here */ #push, #footer { height: 60px; } #footer { background-color: #f5f5f5; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; height: auto; } .container .credit { margin: 20px 0; } /* Adjust Nav */ #wrap > .container { margin-top: 60px; } </style> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="ico/favicon.png"> </head> <body> <div id="wrap"> <div class="navbar navbar-inverse navbar-fixed-top" > <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container"> <h1>Bootstrap starter template</h1> <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p> </div> <!-- /container --> <div id="push"></div> </div> <!-- End Wrap --> <div id="footer"> <div class="container"> <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../jquery.js"></script> <script src="js-ext/bootstrap-transition.js"></script> <script src="js-ext/bootstrap-alert.js"></script> <script src="js-ext/bootstrap-modal.js"></script> <script src="js-ext/bootstrap-dropdown.js"></script> <script src="js-ext/bootstrap-scrollspy.js"></script> <script src="js-ext/bootstrap-tab.js"></script> <script src="js-ext/bootstrap-tooltip.js"></script> <script src="js-ext/bootstrap-popover.js"></script> <script src="js-ext/bootstrap-button.js"></script> <script src="js-ext/bootstrap-collapse.js"></script> <script src="js-ext/bootstrap-carousel.js"></script> <script src="js-ext/bootstrap-typeahead.js"></script> </body> </html> Is there any trick, which works in these cases to know which Element is causing Scroll Bar? I faced similar problem earlier, I do not remember if I could find the easy solution.
716
To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears.
Logically the reason you're getting a vertical scrollbar is that the browser interprets the content to have a height which is bigger then the height of container... in this case you're having vertical margins which overflow and are not being cleared; here's a fiddle resetting to margin:0 and the overflow-Y disappeared.
Add:
* { outline: 1px solid red; } Then when you scroll down you should see one really tall box. Right click on it and select inspect element. That should give you the information you need.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
