Как узнать, какой элемент 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 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="#" onclick="location.href='http://martinbean.co.uk'; return false;">Martin Bean</a> and <a href="#" onclick="location.href='http://ryanfait.com/sticky-footer/'; return false;">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>

Есть ли какой-либо трюк, который работает в этих случаях, чтобы узнать, какой элемент вызывает панель прокрутки? Я столкнулся с аналогичной проблемой ранее, я не помню, смог ли я найти простое решение.

Ответы

Ответ 1

Хорошо, я понял, что если я перейду с margin-top на padding-top для контейнера, чтобы настроить для nav, проблема будет решена. Я достиг решения после удаления элементов в Firebug. Итак, проблема с быстрым исправлением решена, но мои вопросы все еще открыты.

Как узнать, какой элемент вызывает полосу прокрутки? Любой трюк?

Кроме того, почему margin-top не работает, но padding-top работает?

Чтобы уточнить, где я внес изменения, я добавляю измененный CSS:

   /* Adjust Nav */
    #wrap > .container {
        padding-top: 60px;

    }

Ответ 2

Добавить

  * {
   outline: 1px solid red;
  }

Затем, когда вы прокрутите вниз, вы увидите один действительно высокий ящик. Щелкните правой кнопкой мыши по нему и выберите элемент проверки. Это должно дать вам необходимую информацию.

UPDATE:

Вот отличный хром-плагин, который может сделать это для вас: http://pesticide.io/

Ответ 3

отличная статья от Криса Койера, которые объясняют все, что вам нужно об этой проблеме.

после прочтения этой статьи, я лично использую этот код в своей консоли, чтобы узнать, какой элемент вызывает вертикальную прокрутку:

нажмите F12 в своем браузере, затем выберите консоль и скопируйте этот код там и нажмите 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]);
    }
}

Update:
может быть элементом внутри страницы причины 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]);
    }
}

Ответ 4

Используйте инструмент для отладки браузера. Нажмите F12, чтобы открыть его и проверить элементы dom. Вы сможете его найти.

Ответ 5

Обычно я нахожу изображение без максимальной ширины: 100%