Gunnar Bittersmann: css: divs oben und unten mit absoluter Höhe, in der mitte den Re

Beitrag lesen

SELF-Forum

css: divs oben und unten mit absoluter Höhe, in der mitte den Re

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@kartoffelsack:

Was ich aber möchte, ist, dass Header und footer z.B. immer 20px hoch sind, und der Content den restlichen Bereich einnimmt. Wie krieg ich das hin?

Für Browser und IE ≥ 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"  
    xml:lang="und" lang="und"  

>  

    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Lorem ipsum</title>  
    </head>  
    <body>  
        <div id="pagehead">Lorem ipsum</div>  
        <div id="pagebody">  
            <p>Lorem ipsum dolor sit amet.</p>  
        </div>  
        <div id="pagefoot">Lorem ipsum</div>  
    </body>  
</html>

html, body  
{  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}  
  
#pagehead, #pagebody, #pagefoot  
{  
    position: absolute;  
    left: 0;  
    width: 100%;  
}  
  
#pagehead  
{  
    top: 0;  
    height: 20px;  
    background: #F66;  
}  
  
#pagebody  
{  
    top: 20px;  
    bottom: 20px;  
    background: #6F6;  
    overflow: auto;  
}  
  
#pagefoot  
{  
    bottom: 0;  
    height: 20px;  
    background: #66F;  
}

Live long and prosper,
Gunnar

--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
Beitrag melden
–
Informationen zu den Bewertungsregeln