子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 +溢出自動

回答

相關問題