Die Bildlaufleiste der DIV mit position FIXIERT ist, teilweise versteckt hinter Fenster scrollbar

Habe ich ein Inhaltsverzeichnis auf meiner Seite (siehe hier) mit diesen CSS-Stile:

div.toc {
    height:38em;
    position:fixed;
    right:0;
    top:5em;
    width:21em;
    z-index:1;
}

Wie muss ich diese Einstellungen ändern, um sicherzustellen, dass der DIV nicht teilweise verdeckt hinter dem Körper/window scroll-bar?

(Getestet mit Firefox 3.6 und Opera 10.10).

InformationsquelleAutor Aaron Digulla | 2010-05-13
  1. 8

    Tatsächlich, Ihre div.toc richtig positioniert ist. Das problem mit der <iframe>.

    Denken Sie daran, Ihre box-Modell... Breite und Höhe berechnet wird, unabhängig von der margin-und padding...

    Die Bildlaufleiste der DIV mit position FIXIERT ist, teilweise versteckt hinter Fenster scrollbar

    So, indem er width: 100%; auf Ihre iframe.toc plus ein margin-left: 0.5em Sie sind im Grunde erzählt die browser die folgende:

    Verwenden Sie die volle Breite des übergeordneten Elements, und versetzen Sie Sie 0.5em nach Links.

    Total effective width: 100% + 0.5 em

    Was Sie wirklich sagen wollen ist Folgendes:

    Subtrahieren 0.5em aus die volle Breite des übergeordneten Elements zur Verwendung als Polsterung auf der linken Seite und verwenden Sie diese als Breite.

    Total effective width: 100% - 0.5 em (gewünschte)

    Die Lösung ist daher einfach... Entfernen Sie die margin-left aus iframe.toc und legte eine padding-left: 0.5em auf div.toc.

    div.toc {
    background-color: #f0f0f0;
    position: fixed;
    top: 5em;
    right: 0;
    width: 21em;
    height: 38em;
    padding-left: .5em;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    z-index: 1;
}

iframe.toc {
    background-color: #f0f0f0;
    border: 0;
    width: 100%;
    height: 30em;
    border-bottom: 1px solid #ccc;
}
    • Sie sind absolut richtig. +1 für die aufwendige Antwort!
    InformationsquelleAutor Andrew Moore
  2. 2

    Können Sie machen Sie Inhaltsverzeichnis position 1 em vom rechten wie diese: right: 1em;

    Habe ich gerade versucht, es für Sie und right: 1em; sieht gut aus.

    • Es wird seltsam Aussehen, wenn es keine Fenster scrollbar -: - ( gibt es nicht eine Möglichkeit zu sagen, "rechts" == "linken Rand eines Fensters Scrollbalken"?
    • Keine Ahnung, warum 1em genau funktioniert, aber es funktioniert für mich. Stellen Sie sicher, überprüfen Sie Ihre css auf font-size, wenn Sie dieses Update verwenden.
    InformationsquelleAutor Jonathan Czitkovics
Schreibe einen Kommentar