代码之家 › 专栏 › 技术社区 › Aaron Digulla

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

fixed scrollbar css

Aaron Digulla · 技术社区 · 16 年前

我的页面中有一个目录(请参见 here )使用这些CSS样式:

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

如何更改这些设置以确保DIV不会部分隐藏在Body/Window滚动条后面?

(使用火狐3.6和Opera 10.10进行测试)。

2 回复 | 直到 16 年前

Andrew Moore 16 年前

实际上,您的 div.toc 位置正确。问题出在您的中。


   
    
     
      记住你的盒子模型…宽度和高度是独立于边距和填充计算的…
     
     
      
     
     
      因此,通过让
      
       width:100%;
       
        on your
        
         iframe.toc
        
        plus a
        
         margin-left:0.5em
        
        ,您基本上是在告诉浏览器以下内容:
       
      
     
     
      
       < Buff行情>
       
        使用父元素的整个宽度并将其偏移
        
         0.5em.
         

         
          总有效宽度:100%+0.5em
         
        
       
       
        
         < /块引用>
         
          你真正想说的是:
         
         < Buff行情>
         
          从要用作左侧填充的父元素的全宽中减去
          
           0.5em,并将其用作宽度。
           

           
            总有效宽度:100%-0.5em(desired)
           
          
         
         
          
           < /块引用>
           
            因此,解决方案很简单…从
            
             iframe.toc中删除
             
              Margin Left
              
               并将a
               
                padding Left:0.5em
                
                 on
                 
                  div.toc
                  
                   。
                  
                 
                
               
              
             
            
           
           
            
             
              div.toc{
背景色:f0f0;
位置:固定;
顶部:5EM;
权利要求:0;
宽度:21EM;
高度:38米;
左侧填充:.5em;
左边框:1个实心CCC;
边框底部:1px实心CCC;
边框顶部:1px实心CCC;
Z指数:1;
}

IFORAM.ToC {
背景色:f0f0;
边界:0;
宽度:100%;
高度:30EM;
边框底部:1px实心CCC;
}
< /代码> 
我学会了。问题是你的<iframe>.

记住你的盒子模型…宽度和高度是独立于边距和填充…



因此,通过width: 100%;对你iframe.toc加一margin-left: 0.5em,您基本上告诉浏览器以下内容:


使用父元素的整个宽度并将其偏移0.5em向左。

总有效宽度:100%+0.5em


你真正想说的是:


减去0.50EM从父元素的整个宽度开始,在左侧用作填充,并将其用作宽度。

总有效宽度:100%-0.5em(期望的)


因此,解决方案很简单…移除margin-left从国际贸易组织放一个padding-left: 0.5em在总有机碳.

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;
}

Jonathan Czitkovics 16 年前

您可以将目录设置为从右侧开始的位置1 em,如下所示: right: 1em;

我刚为你试过,而且 权利:1EM; 看起来不错。