Wie Sie wissen, welches HTML-Element eine vertikale Bildlaufleiste verursacht

75

Ich lerne Bootstrap . Im Einstiegsmenü sind nur wenige Vorlagen angegeben. Ich spiele damit. Ein Beispiel ist die feste Fußzeile. Ich habe nav aus dem vorherigen Beispiel verwendet und wollte dies mit fester Fußzeile anpassen. Aber die vertikale Bildlaufleiste kommt. Ich suche nach einem Element, das eine vertikale Bildlaufleiste verursacht.

Hier ist 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>

Gibt es einen Trick, der in diesen Fällen funktioniert, um zu wissen, welches Element die Bildlaufleiste verursacht? Ich hatte früher ein ähnliches Problem, ich erinnere mich nicht, ob ich die einfache Lösung finden konnte.

html css twitter-bootstrap Satya Prakash
quelle
1
Der beste Weg, um Probleme dieser Art herauszufinden, besteht darin, in den Inspektor zu gehen und Elemente zu löschen, bis die Bildlaufleiste verschwunden ist.
Eroberer
1
@ Conqueror Vor genau 10 Minuten habe ich auch die gleiche Antwort gepostet. Aber danke. Auf der Suche nach mehr ...
Satya Prakash

Antworten:

111

Hinzufügen:

  * {
   outline: 1px solid red;
  }

Wenn Sie dann nach unten scrollen, sollten Sie eine wirklich große Box sehen. Klicken Sie mit der rechten Maustaste darauf und wählen Sie Element prüfen. Das sollte Ihnen die Informationen geben, die Sie benötigen.

AKTUALISIEREN:

Hier ist ein raffiniertes Chrome-Plugin, das das für Sie erledigen kann: http://pesticide.io/

Jeffpowrs
quelle
Ich habe die Antwort unten gepostet, aber das Problem neu erstellt, um dies zu überprüfen. Es ist nicht klar, wo das Problem liegt! zumindest im obigen Beispiel.
Satya Prakash
6
@ Jeff Powers: Dies ist der beste Tipp seit Jahren ... Ich habe nie daran gedacht, aber es funktioniert hervorragend !!
Meules
2
Wenn ich könnte, würde ich dir +100 geben. Dies ist ein erstaunlicher Tipp!
Alexey
1
Dies ist ideal für einige andere Probleme mit der visuellen Formatierung, danke!
kingPuppy
2
Daumen hoch für die Verlängerung. 30 Minuten Suche in LITERAL 5 Sekunden
behoben
16

Es gibt einen ausgezeichneten Artikel von Chris Coyier, der alles erklärt, was Sie zu diesem Problem benötigen.

Nachdem ich diesen Artikel gelesen habe, verwende ich persönlich diesen Code in meiner Konsole, um herauszufinden, welches Element einen vertikalen Bildlauf verursacht:

Drücken Sie F12in Ihrem Browser, wählen Sie consoleden folgenden Code aus, fügen Sie ihn ein und drücken Sie die Eingabetaste:

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:
Wenn der obige Code nicht funktioniert hat, ist er möglicherweise ein Element in einem Iframe, durch das die Seite vertikal gescrollt wird. In diesem Fall können Sie iframesmit diesem Code überprüfen :

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';
       }
   }
}
Mosijava
quelle
14

Fügen Sie das Folgende in die Konsole ein und scrollen Sie. Der Täter wird in der Konsole protokolliert.

function findScroller(element) {
    element.onscroll = function() { console.log(element)}

    Array.from(element.children).forEach(findScroller);
}

findScroller(document.body);
lcharbon
quelle
1

Ok, ich habe das Problem gelöst , wenn ich von Rand oben zu Polster oben wechsle, damit der Container für die Navigation angepasst werden kann. Ich habe die Lösung gefunden, nachdem ich Elemente in Firebug gelöscht habe. Das Problem mit der schnellen Lösung ist also gelöst, aber meine Fragen sind noch offen.

Woher wissen, welches Element die Bildlaufleiste verursacht? Irgendein Trick?

Warum funktioniert Margin-Top nicht, aber Padding-Top hat funktioniert?

Um zu verdeutlichen, wo ich Änderungen vorgenommen habe, füge ich das geänderte CSS hinzu:

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

    }
Satya Prakash
quelle
versuche klar hinzuzufügen: beides; zu Ihrem CSS, es wird Rand-Top-Arbeit machen
Nizam Kazi
@ NizamKazi wo? Ich habe es in #wrap {} und #wrap> .container {} versucht.
Satya Prakash
Wenden Sie es auf das Element an, das Sie als Rand von oben festlegen möchten. Bedeutet, wenn Sie den oberen Rand auf .container anwenden möchten, fügen Sie clear hinzu: beide CSS-Eigenschaften. Versuchen Sie auch "float: left" oder "float: right", wenn die Ausrichtung Ihrer Site nicht gestört wird.
Nizam Kazi
1

Ich finde, es ist normalerweise ein Bild ohne maximale Breite: 100%

Satbir Kira
quelle
-3

Verwenden Sie ein Browser-Debugging-Tool. Drücken Sie F12, um es zu öffnen und die dom-Elemente zu überprüfen. Sie werden es finden können.

Blaise
quelle