세로 스크롤 막대를 일으키는 HTML 요소를 확인하는 방법
저는 Bootstrap을 배우고 있습니다. 시작하기 메뉴에는 몇 가지 템플릿이 제공됩니다. 나는 그것을 가지고 놀고있다. 한 가지 예는 고정 바닥 글에 관한 것입니다. 이전 예제의 nav를 사용했고 고정 바닥 글로 조정하고 싶었습니다. 그러나 수직 스크롤바가오고 있습니다. 수직 스크롤 막대를 일으키는 요소를 찾고 있습니다.
다음은 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>
어떤 요소가 Scroll Bar를 유발하는지 알기 위해 이러한 경우에 작동하는 트릭이 있습니까? 나는 이전에 비슷한 문제에 직면했지만 쉬운 해결책을 찾을 수 있는지 기억이 나지 않습니다.
더하다:
* {
outline: 1px solid red;
}
그런 다음 아래로 스크롤하면 정말 큰 상자가 표시됩니다. 그것을 마우스 오른쪽 버튼으로 클릭하고 검사 요소를 선택하십시오. 그러면 필요한 정보를 얻을 수 있습니다.
최신 정보:
Here is a nifty chrome plugin that can do that for you : http://pesticide.io/
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';
}
}
I'd say you should use document.scrollingElement.
Use some browser debugging tool. Hit F12 to open it and check the dom elements. You'll be able to find it.
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;
}
I find it's usually an image without a max-width: 100%
'Nice programing' 카테고리의 다른 글
| Amazon RDS 환경에서 새 MySQL 사용자 생성 (0) | 2020.12.11 |
|---|---|
| UML 클래스 다이어그램에서 다이아몬드 기호는 무엇을 의미합니까? (0) | 2020.12.11 |
| Android 스튜디오가 'Gradle :'_debugCompile '종속성 해결'또는 'detachedConfiguration1'에서 멈춤 (0) | 2020.12.11 |
| mongodb-찾아서 집계하는 방법 (0) | 2020.12.11 |
| dplyr :: 하나의 열을 선택하고 벡터로 출력 (0) | 2020.12.11 |