如何知道哪个HTML元素是造成垂直滚动条
我正在学习Bootstrap 。 在入门菜单中，只给出了很less的模板。 我正在玩这个。 一个例子是关于固定页脚。 我从前面的例子中使用导航，并希望用固定页脚来调整。 但垂直滚动条即将到来。 我正在寻找导致垂直滚动条的元素。
这里是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> 有没有什么窍门，在这些情况下，知道哪个元素导致滚动条？ 我以前遇到类似的问题，我不记得是否能find简单的解决scheme。
加：
* { outline: 1px solid red; }
那么当你向下滚动的时候，你会看到一个很高的盒子。 右键单击它并select检查元素。 这应该给你你需要的信息。
更新：
这是一个漂亮的Chrome插件，可以为你做到这一点： http : //pesticide.io/
克里斯·科伊尔（Chris Coyier）有一篇很好的文章解释了你需要解决这个问题的一切。
在阅读这篇文章之后，我亲自在我的控制台中使用这段代码来找出导致垂直滚动的元素：
在你的浏览器中按F12，然后select控制台，并复制粘贴这里的代码，然后按回车
var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth; for (; i < all.length; i++) { rect = all[i].getBoundingClientRect(); if (rect.right > docWidth || rect.left < 0){ console.log(all[i]); } }
更新：
可能是iframe原因页面内的元素垂直滚动。 在这种情况下，你应该用这个代码检查每个可疑的iframe：
var frame = document.getElementsByTagName("iframe"); frame = frame[0]; frame = (frame.contentWindow || frame.contentDocument); var all = frame.document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth; for (; i < all.length; i++) { rect = all[i].getBoundingClientRect(); if (rect.right > docWidth || rect.left < 0){ console.log(all[i]); } }
好吧，我知道如果我从容器顶部更改为容器的顶部调整为导航问题解决。 删除Firebug中的元素后，我find了解决scheme。 所以，快速解决问题已经解决了，但我的问题仍然是开放的。
如何知道哪个元素导致滚动条？ 任何诡计？
另外，为什么margin-top不起作用，而pad-top已经起作用了？
为了清楚我所做的更改，我添加了修改后的CSS：
/* Adjust Nav */ #wrap > .container { padding-top: 60px; }
我发现它通常是一个没有最大宽度的图像：100％
我会说你应该使用window.scrollingElement 。
使用一些浏览器debugging工具。 打F12打开它，并检查DOM的元素。 你将能够find它。
