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％

回答

相关问题