html - 垂直スクロールバーの原因となっている HTML 要素を特定する方法

Question

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>

これらの場合にどの要素がスクロールバーを引き起こしているかを知るためのトリックはありますか? 以前に同様の問題に直面しましたが、簡単な解決策を見つけることができたかどうかは覚えていません。

score 129 · Accepted Answer

追加：

* {
  outline: 1px solid red;
}

次に下にスクロールすると、非常に高いボックスが 1 つ表示されます。それを右クリックして要素の検査を選択します。これにより、必要な情報が得られるはずです。

score 18 · Accepted Answer

この問題について必要なすべてを説明している Chris Coyier による優れた記事があります。

この記事を読んだ後、私はコンソールでこのコードを個人的に使用して、どの要素が垂直スクロールを引き起こすかを調べます。

F12ブラウザでを押してconsoleから、以下のコードを選択してそこに貼り付け、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';
    }
}

更新:上記のコードが機能しない
場合、ページを垂直方向にスクロールさせる iframe 内の要素である可能性があります。この場合、次のiframesコードで確認できます。

var frames = document.getElementsByTagName("iframe");
for(var i=0; i < frames.length; i++){
   var frame = frames[i];
   frame = (frame.contentWindow || frame.contentDocument);
   var all = frame.document.getElementsByTagName("*"),rect,
       docWidth = document.documentElement.offsetWidth;
   for (var j =0; j < all.length; j++) {
       rect = all[j].getBoundingClientRect();
       if (rect.right > docWidth || rect.left < 0){
           console.log(all[j]);
           all[j].style.border = '1px solid red';
       }
   }
}

score 1 · Accepted Answer

1

通常、最大幅のない画像であることがわかります: 100%

于 2015-07-27T09:27:21.400 に答える

score 1 · Accepted Answer

OK、コンテナーのマージントップからパディングトップに変更してナビゲーションを調整すると、問題は解決することがわかりました。Firebugで要素を削除した後、解決策にたどり着きました。それで、クイックフィックスの問題は解決しましたが、私の質問はまだ未解決です.

スクロールバーを引き起こしている要素を知る方法は? 何かトリック？

また、margin-top が機能しないのに padding-top が機能するのはなぜですか?

どこを変更したかを明確にするために、変更した CSS を追加します。

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

    }

score -4 · Accepted Answer

ブラウザのデバッグツールを使用します。ヒットF12して開き、dom 要素を確認します。あなたはそれを見つけることができるでしょう。

html - 垂直スクロール バーの原因となっている HTML 要素を特定する方法

9 に答える 9

Related

Reference

html - 垂直スクロールバーの原因となっている HTML 要素を特定する方法