用CSS填充剩余的屏幕高度

我正在用3个div构建页面布局：一个页眉和一个页脚，它们的像素高度固定，页面中间的内容div应该填充剩余的屏幕高度。此外，我希望能够在内容分区中将高度设置为100％，因为其中一个分区将托管一种需要填充剩余屏幕高度的绘图区域。所以，特别重要的是内部div不会在页眉或页脚下泄漏。到目前为止，我实现了在所有专业的浏览器工作除了IE 6 & 7.用CSS填充剩余的屏幕高度

有什么我可以做些什么来解决我的布局IE6 & 7 100％有效的CSS的解决方案？或者，你看到另一种方式去做我想做的事情吗？

下面是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>The #content div fill the remaining height and appears to have a height</title> 
    <style TYPE="text/css"> 
    <!-- 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body, 
    #container{ 
     height: 100%; 
    } 

    #container{ 
     position: relative; 
    } 

    #header, 
    #footer{ 
     height: 60px; 
     line-height: 60px; 
     background: #ccc; 
     text-align: center; 
     width : 100%; 
     position: absolute; 
    } 

    #header{ 
     top: 0; 
    } 

    #footer{ 
     bottom: 0; 
    } 

    #content{ 
     position: absolute; 
     top:60px; 
     bottom: 60px; 
     width : 100%; 
     overflow: auto; 
     border-top: 1px solid #888; 
     border-bottom: 1px solid #888; 
    } 

    #inner-content{ 
     overflow: auto; 
     background-color: #FC0; 
     height: 100%; 
    } 

    p{ 
     margin-bottom: 10px; 
    } 
    --> 
    </style> 

</head> 
<body> 
    <div id="container"> 
    <div id="header"> 
     <h1>Header</h1>   
    </div> 
    <div id="content"> 
     <div id='inner-content'> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel 
      quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie. 
      Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit. 
     </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel 
      quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie. 
      Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit. 
     </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel 
      quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie. 
      Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit. 
     </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel 
      quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie. 
      Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit. 
     </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel 
      quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie. 
      Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit. 
     </p> 
     </div> 
    </div> 
    <div id="footer"> 
     <h1>Footer</h1> 
    </div> 
    </div> 
</body> 
</html>

在此先感谢您的帮助。

Live example here。

来源

2011-02-10 Sylvain Prat

_Forget_ IE6。请！ – Kyle 2011-02-10 09:03:48