子div高度100％内部位置：固定div +溢出自动

我在尝试以下操作时遇到了一些奇怪的现象（请参阅jsfiddle：http://jsfiddle.net/9nS47/）。子div高度100％内部位置：固定div +溢出自动

HTML：

<div id="slider"> 
    <div id="wrapper"> 
     <div id="navigation"></div> 
     <div id="container"> 
      <div id="button"></div> 
     </div> 
    </div> 
</div>

CSS：

HTML,BODY 
{ width:100%; height:100%; } 
* { margin: 0; padding: 0; } 
#slider 
{ 
    position: fixed; 

    top: 0; 
    bottom: 0px; 
    left: 100px; 

    overflow-y: auto; 

    background-color: red; 
} 

#wrapper 
{ 
    position: relative; 

    height: 100%; 

    background-color: #000000; 

    min-height:400px; 
} 

#navigation 
{ 
    display: inline-block; 
    width: 80px; 
    height: 100%; 

    background-color: #0000FF; 
} 

#container 
{ 
display: inline-block; 
    height: 100%; 

    background-color: #00FF00; 
} 

#button 
{ 
    width: 22px; height: 100%; 
    float:right; 

    background-color: #CCFFCC; 
    cursor:pointer; 
}

如果它的高度我所试图做的是使跨越整个可见窗口的高度，只有左侧导航栏显示滚动条比例如400px小。该div的滚动条似乎总是可见的，由于一些调整大小的问题（底部有一个额外的像素，我无法解释[color：red]）。

当滚动条可见时，Firefox也会将第二个子元素移动到第一个子元素下方，因为滚动条似乎是内容区域的一部分，因此占用大约20px的空间。如果将Overflow：Auto替换为Overflow：scroll，则不会发生这种情况。

自动柜员机更改布局（特别是位置固定的容器）不是一个选项。

不介意绿色和蓝色框之间的空间。似乎是一个空白问题。

来源

2013-02-14 Savedro

如果你使用一个小的JavaScript或jQuery，会有影响吗？如果你这样做，这将工作。 – tahdhaze09 2013-02-14 21:50:31

感谢您的回答，我可以使用Javascript或jQuery来解决问题。 – Savedro 2013-02-14 22:13:53

由于您似乎无法更改您的'包装'代码，因此我试图尽可能少地更改原始代码。实际上，我唯一做的就是添加一些jQuery。

结帐this updated jsfiddle。我已经包括jQuery和我说的JavaScript是这样的：

$(window).bind("load resize", function(){ 
    //this runs as soon as the page is 'ready' 
    if($(window).height() < 400){   
     $("#slider").css("overflow-y","scroll"); 
    }else{   
     $("#slider").css("overflow-y","hidden"); 
    } 
});

基本上，“onload事件”和“onrezise”，jQuery的数字，如果你要显示的滚动条或没有。

您的“自动”不工作的原因是由于slider元素的“固定”位置。浏览器无法完全弄清楚高度。

来源

2013-02-14 22:54:18 davehale23

谢谢，它效果很好。对不起，我不能投票，因为我没有足够的声望，但我会后来赶上它。 – Savedro 2013-02-15 07:41:50

子div高度100％内部位置：固定div +溢出自动

回答

相关问题