Barra di scorrimento del div con posizione fissa è in parte nascosta dietro la finestra di scorrimento

Question

Ho una tabella di contenuti nella mia pagina (vedi qui ) con questi stili CSS:

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

Come devo modificare queste impostazioni per assicurarsi che il DIV non è parzialmente nascosto dietro il bar corpo / window scroll?

(testato con Firefox 3.6 e Opera 10.10).

Answer 1

In realtà, il tuo div.toc è posizionato correttamente. Il problema è con il vostro <iframe>.

Ricordate che il vostro modello di dialogo ... larghezza e l'altezza viene calcolata indipendentemente dal margin e padding ...

Quindi, avendo width: 100%; sul tuo iframe.toc più una margin-left: 0.5em, si sono sostanzialmente dicendo al browser il seguente:

  

Usa l'intera larghezza dell'elemento genitore e l'offset si 0.5em a sinistra.
   Larghezza totale effettivo: 100% + 0.5em

Che cosa si vuole veramente dire è il seguente:

  

0.5em Sottrarre dalla piena larghezza dell'elemento genitore per l'uso come imbottitura a sinistra e utilizzare questo come larghezza.
   Larghezza totale effettivo: 100% - 0.5em (desiderato)

La soluzione è quindi semplice ... Rimuovere il margin-left da iframe.toc e mettere un padding-left: 0.5em su 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;
}

Answer 2

Si può fare sommario posizione 1 em da destra in questo modo: right: 1em;

Ho appena provato per voi e per gli sguardi right: 1em; buona.