title: How to Know Which HTML Element is Causing Vertical Scroll Bar
body: <p>I am learning <a href="http://getbootstrap.com/2.3.2/getting-started.html">Bootstrap</a>. 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. <strong>I am looking for element which is causing Vertical Scroll Bar.</strong> </p>
  
  <p>Here is HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Bootstrap, from Twitter&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content=""&gt;
  
          &lt;!-- Le styles --&gt;
          &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
  
          &lt;style type="text/css"&gt;
  
              /* 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 &gt; .container {
                  margin-top: 60px;
              }
  
          &lt;/style&gt;
  
          &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
  
          &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="html5shiv.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  
          &lt;!-- Fav and touch icons --&gt;
  
          &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"&gt;
          &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"&gt;
          &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"&gt;
          &lt;link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"&gt;
          &lt;link rel="shortcut icon" href="ico/favicon.png"&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="wrap"&gt;
              &lt;div class="navbar navbar-inverse navbar-fixed-top" &gt;
                  &lt;div class="navbar-inner"&gt;
                      &lt;div class="container"&gt;
                          &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
                          &lt;div class="nav-collapse collapse"&gt;
                              &lt;ul class="nav"&gt;
                                  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="container"&gt;
  
                  &lt;h1&gt;Bootstrap starter template&lt;/h1&gt;
                  &lt;p&gt;Use this document as a way to quick start any new project.&lt;br&gt; All you get is this message and a barebones HTML document.&lt;/p&gt;
  
              &lt;/div&gt; &lt;!-- /container --&gt;
              &lt;div id="push"&gt;&lt;/div&gt;
          &lt;/div&gt; &lt;!-- End Wrap --&gt;
  
          &lt;div id="footer"&gt;
              &lt;div class="container"&gt;
                  &lt;p class="muted credit"&gt;Example courtesy &lt;a href="http://martinbean.co.uk"&gt;Martin Bean&lt;/a&gt; and &lt;a href="http://ryanfait.com/sticky-footer/"&gt;Ryan Fait&lt;/a&gt;.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;!-- Le javascript
          ================================================== --&gt;
          &lt;!-- Placed at the end of the document so the pages load faster --&gt;
          &lt;script src="../jquery.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-transition.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-alert.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-modal.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-dropdown.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-tab.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-tooltip.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-popover.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-button.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-collapse.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-carousel.js"&gt;&lt;/script&gt;
          &lt;script src="js-ext/bootstrap-typeahead.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Is there any trick, which works in these cases to know which Element is causing Scroll Bar?</strong> I faced similar problem earlier, I do not remember if I could find the easy solution.</p>