Question

我正在构建一个包含3个div的页面布局：一个标题和一个固定高度（以像素为单位）的页脚，以及页面中间应该填充剩余屏幕高度的内容div。此外，我希望能够在内部内容div中将高度设置为100％，因为其中一个将承载一种需要填充剩余屏幕高度的绘图区域。因此，内部div不会在页眉或页脚下泄漏尤为重要。到目前为止，我实现了100％有效的CSS解决方案，适用于除Internet Explorer 6和Internet Explorer之外的所有主要浏览器。 7。

我有什么办法可以修复我的IE6＆amp; amp; 7？或者，你看到了另一种方法来做我想做的事吗？

以下是代码：

<!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

Answer 1

我最终使用Javascript来实现同样的目标

使用CSS填充剩余的屏幕高度

1 个答案: