css - 位置固定的 DIV 滚动条部分隐藏在窗口滚动条后面

Question

我的页面中有一个目录(请参阅 here )，其中包含以下 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加一个 margin-left: 0.5em ，您基本上是在告诉浏览器以下内容:

Use the full width of the parent element and offset it 0.5em to the left.
Total effective width: 100% + 0.5em

你真正想说的是:

Substract 0.5em from the full width of the parent element to use as padding on the left and use this as width.
Total effective width: 100% - 0.5em (desired)

因此，解决方案很简单...删除 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;
}