问题
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.
回答1:
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.
UPDATE:
Here is a nifty chrome plugin that can do that for you : http://pesticide.io/
回答2:
There is an excellent article by Chris Coyier which explain everything you need about this problem.
after reading this article, I personally use this code in my console to find out which element cause vertical scroll:
press F12 in your Browser then choose console and copy paste this code there and press enter
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]);
all[i].style.border = '1px solid red';
}
}
Update:
it might be an element inside an iframe make page to vertically scroll.
in this case you should check every suspected iframe with this code:
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]);
all[i].style.border = '1px solid red';
}
}
回答3:
Paste the below in the console and scroll. It will log the culprit in the console.
function findScroller(element) {
element.onscroll = function() { console.log(element)}
Array.from(element.children).forEach(findScroller);
}
findScroller(document.body);
回答4:
I'd say you should use document.scrollingElement.
回答5:
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?
To make clear where I made change, I am adding the modified CSS:
/* Adjust Nav */
#wrap > .container {
padding-top: 60px;
}
回答6:
I find it's usually an image without a max-width: 100%
回答7:
Use some browser debugging tool. Hit F12 to open it and check the dom elements. You'll be able to find it.
来源：https://stackoverflow.com/questions/19095964/how-to-know-which-html-element-is-causing-vertical-scroll-bar