FIVED DIV scrollbar partially hidden behind scrollbar

Question

I have a table of contents on my page (see here ) with these CSS styles:

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

How do I change these settings to make sure that the DIV is not partially hidden behind the body / window scroll bar?

(Tested with Firefox 3.6 and Opera 10.10).

Answer 1

Actually, yours is div.toccorrectly located. The problem is with yours <iframe>.

Remember your box model ... width and height are calculated regardless of margin and filling ...

So, having width: 100%;in your iframe.tocplus a margin-left: 0.5em, you basically tell the browser the following:

0.5em .
: 100% + 0.5

, , :

Substract 0.5em .
: 100% - 0.5 ()

... margin-left iframe.toc a padding-left: 0.5em 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

1 em : right: 1em;

, right: 1em; .