位置为FIXED的DIV滚动条部分隐藏在窗口滚动条后面

Question

我的页面中有一个目录(见这里)以及这些CSS样式:

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

如何更改这些设置以确保DIV不会部分隐藏在正文/窗口滚动条后面？

(经过Firefox 3.6和Opera 10.10测试).

Answer 1

实际上,你div.toc的位置正确.问题出在你身上<iframe>.

记住您的盒子模型...宽度和高度是独立于边距和填充计算的......

所以,通过width: 100%;你的iframe.toc加号a margin-left: 0.5em,你基本上告诉浏览器:

使用父元素的整个宽度并将其偏移0.5em到左侧.
总有效宽度:100%+ 0.5em

你真正想说的是以下内容:

0.5em从父元素的整个宽度进行减法以在左侧用作填充并将其用作宽度.
总有效宽度:100% - 0.5em(所需)

该解决方案是简单的,因此...删除margin-left从iframe.toc,把一个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;
}