CSS溢出盒高度100％

怎樣才能讓內容和標題之間的這種 '滾動框' 適合： http://jsfiddle.net/LDXhf/5/CSS溢出盒高度100％

（積分如果它適用於IE6）

CSS：

#main { 
    position: relative; 
    height: 200px; 
    background-color: yellow; 
} 

#header { 
    background-color: blue; 
    text-align: center; 
} 

#footer { 
    position : absolute; 
    bottom : 0; 
    left: 0; 
    width: 100%; 
    background-color: blue; 
    text-align: center; 
} 

#content { 
    background-color: white; 
} 

#scrollbox { 
    background-color: red; 
    overflow: auto; 
    height: 100%; 
}

HTML：

<div id="main"> 
    <div id="header"> 
     HEADER 
    </div> 

    <div id="content"> 
     CONTENT 
    </div> 

    <div id="footer"> 
     FOOTER 
    </div> 

    <div id="scrollbox"> 
     DATA1<br/> 
     DATA2<br/> 
     DATA3<br/> 
     DATA4<br/> 
     DATA5<br/> 
     DATA6<br/> 
     DATA7<br/> 
     DATA8<br/> 
     DATA9<br/> 
     DATA10<br/> 
     DATA11<br/> 
     DATA12<br/> 
     DATA13<br/> 
     DATA14<br/> 
    </div> 
</div>

來源

2014-02-05 r03

在2014年IE6的支持？神聖莫里。 – Marwelln

我知道，但這需要在Windows CE上工作 – r03

這是一個小提琴，解決它使用固定的高度：http://jsfiddle.net/9P9fy/1/ – r03

你需要給#scrollbox固定的height，這將使它適合兩者之間。

在小提琴中，你有一個固定的高度，所以可以知道scollbox的高度。

但是，如果高度可調整，則會出現問題，因爲CSS無法使用百分比或flexbox時不知道所需的高度。

我最近做了另一個問題，下面的演示這會爲你工作：

http://codepen.io/helion3/details/FAElH

訣竅是使用正好安置在頁眉/頁腳的邊緣的包裝，然後允許內內容有height: 100%，這樣瀏覽器就會自動調整內容的高度。

來源

2014-02-05 18:54:47 helion3

這就是問題所在。我沒有固定的身高。 – r03

更新了我的答案。它應該在IE6 – helion3

可能這不是最好的解決方案，但你可以使用這個技巧即ie。在底部設置-ve值這樣

#footer { 
    position : absolute; 
    bottom : -60px; 
    left: 0; 
    width: 100%; 
    background-color: blue; 
    text-align: center; 
}

Js Fiddle Demo

來源

2014-02-05 18:59:43 Sachin

工作充分這是推動頁腳進一步下跌......這裏面的差距等 – helion3

@ helion3喔我這樣做，故意使外觀相同頭。您可以根據需要更改'-ve'值。現在看到的小提琴 – Sachin

我猜想，將工作爲好，但他必須不斷降低'＃main' div的高度來考慮擴展，如果他出於某種原因需要不斷溢出'：hidden'，這將不再起作用。 – helion3

CSS溢出盒高度100％

回答

相關問題