Fill remaining screen height with CSS_问答_开发者

开发者 https://www.devze.com 2023-02-10 04:23 出处：网络

I\'m building a page layout with 3 divs: a header and a footer wi开发者_高级运维th fixed heights in pixels, and a content div in the middle of the page that should fill the remaining screen height. Fu

I'm building a page layout with 3 divs: a header and a footer wi开发者_高级运维th fixed heights in pixels, and a content div in the middle of the page that should fill the remaining screen height. Furthermore, I want to be able to set height to 100% in the inner content divs, because one of them will host a kind of drawing area that need to fill the remaining screen height. So, it's especially important that inner divs do not leak under the header or footer. So far, I achieved a 100% valid CSS solution that work in all majors browsers except Internet Explorer 6 & 7.

Is there anything I can do to fix my layout for IE6 & 7? Or, do you see another way to do what I want?

Here is the code:

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

Thanks in advance for your help.

Live example here.

I ended up using Javascript to achieve the same thing