So beheben Sie ein Div nur mit CSS am Seitenanfang

Question 1

Ich schreibe eine Glossarseite. Ich habe die Alphabet-Links oben auf der Seite. Ich möchte den oberen Rand der Seite (einschließlich der Alphabet-Links) festhalten, während der Abschnitt der Seite mit den Definitionen beim Klicken auf ein Alphabet nach oben / unten scrollt.

Mein HTML sieht ein bisschen so aus:

<html>
<head><title>My Glossary</title></head>
<body>
        <div id="top">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... -->
           </dl>
        </div>
</body>
</html>

[Bearbeiten]

Die Art von Effekt, den ich zu erzielen versuche, ähnelt dem hier . Der Unterschied besteht darin, dass im Beispiel im Link das Scrollen der Seite erfolgt, wenn ein Benutzer auf eine Kategorie klickt. In meinem Fall möchte ich die Seite scrollen, wenn auf einen Index (dh ein Alphabet) oben auf der Seite geklickt wird.

Question 2

Ja, es gibt verschiedene Möglichkeiten, dies zu tun. Der "schnellste" Weg wäre, dem div CSS hinzuzufügen, ähnlich wie im Folgenden

#term-defs {
height: 300px;
overflow: scroll; }

Dadurch wird das div zum Scrollen gezwungen, dies erzielt jedoch möglicherweise nicht den besten Effekt. Eine andere Möglichkeit wäre, die Position der Gegenstände oben absolut festzulegen. Sie können damit spielen, indem Sie so etwas tun.

#top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 23px;
}

Dadurch wird es oben auf anderen Inhalten mit einer Höhe von 23 Pixel fixiert.

Die endgültige Implementierung hängt davon ab, welchen Effekt Sie wirklich wünschen.

Question 3

Sie können so etwas tun:

<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
        <div id="top" style="position:fixed;background:white;width:100%;">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs" style="padding-top:1em;">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... ->
           </dl>
        </div>
</body>
</html>

Es ist die Position: behoben , die am wichtigsten ist, da der obere Teil aus dem normalen Seitenfluss genommen und an der festgelegten Position fixiert wird. Es ist auch wichtig, das padding-top: 1em zu verwenden, da sonst der Begriff defs div direkt unter dem top div beginnen würde. Der Hintergrund und die Breite dienen dazu, den Inhalt des Begriffs-defs div abzudecken, während sie unter dem oberen div scrollen.

Hoffe das hilft.

Question 4

Sie können einfach das obere Div fixieren:

#top { position: fixed; top: 20px; left: 20px; }

Question 5

Sie können auch Flexbox verwenden , müssen jedoch ein übergeordnetes Div hinzufügen, das div#topund abdeckt div#term-defs. Das HTML sieht also so aus:

    #content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #term-defs {
        flex-grow: 1;
        overflow: auto;
    }

    <body>
        <div id="content">
            <div id="top">
                <a href="#A">A</a> |
                <a href="#B">B</a> |
                <a href="#Z">Z</a>
            </div>
    
            <div id="term-defs">
                <dl>
                    <span id="A"></span>
                    <dt>foo</dt>
                    <dd>This is the sound made by a fool</dd>
                    <!-- and so on ... -->
                </dl>
            </div>
        </div>
    </body>

Erweitern Sie das Snippet

flex-grow stellt sicher, dass die Größe des Divs der verbleibenden Größe entspricht.

Sie könnten dasselbe ohne Flexbox tun, aber es wäre komplizierter, die Höhe von zu berechnen (Sie müssten die Höhe von #term-defskennen #topund calc(100% - 999px)die Höhe von #term-defsdirekt verwenden oder einstellen ).
Mit der Flexbox sind dynamische Größen der Divs möglich.

Ein Unterschied besteht darin, dass die Bildlaufleiste nur auf der angezeigt wird term-defs div.