如何知道哪个HTML元素导致垂直滚动条 [英] How to Know Which HTML Element is Causing Vertical Scroll Bar
问题描述
我正在学习引导程序。在入门菜单上，给出的模板很少。我正在玩。一个示例是有关固定页脚的。我使用了上一个示例中的nav，并希望使用固定的页脚进行调整。但是垂直滚动条即将到来。 我正在寻找引起垂直滚动条的元素。
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.
以下是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.
推荐答案
好，我知道，如果将容器的 margin-top 更改为 padding-top ，则可以解决导航问题。
在删除Firebug中的元素后到达解决方案。因此，快速修复问题得以解决，但我的问题仍然悬而未决。
Ok, I got that if I change from margin-top to padding-top for container to adjust for nav then problem is solved. I reached to the solution after deleting elements in Firebug. So, quick fix problem is solved but my questions are still open.
如何知道哪个元素导致了滚动条？还有技巧吗？
How to know which element is causing scroll bar? Any trick?
此外，为什么边距顶部不起作用而填充顶部起作用了？
Also, why margin-top is not working but padding-top has worked?
到弄清楚更改的地方，我要添加修改后的CSS：
To make clear where I made change, I am adding the modified CSS:
/* Adjust Nav */
#wrap > .container {
padding-top: 60px;
}
这篇关于如何知道哪个HTML元素导致垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
