Matthias Apsel: Blockhöhen

Beitrag lesen

SELF-Forum

Blockhöhen

Matthias Apsel Homepage des Autors
– Informationen zu den Bewertungsregeln

Om nah hoo pez nyeetz, Matthias Apsel!

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <style type="text/css">  
	  
	* {margin: 0; padding: 0;}  
	  
        html {margin:0; padding:0; height: 100%;}  
	body {margin: 5em auto; width: 80%; height: -moz-calc(100% - 10em - 2px); border: 1px solid transparent;}  
			  
						  
	p {border:1px solid transparent; background: gold; border-radius: 1em; margin-bottom: 1%; height: -moz-calc(23.75% - 4px);}  
	p:first-child {margin-top: 1%}  
			  
	  
        header, footer {position: fixed; margin: 0; height: 5em; background: red; width: 100%; left:0;}  
	header {top:0;}  
	footer {bottom: 0;}  
			  
    </style>  
    <title>Test</title>  
</head>  
<body>  
  <p>Inhalt 1</p>  
  <p>Inhalt 2</p>  
  <p>Inhalt 3</p>  
  <p>Inhalt 4</p>  
  <header>header</header>  
  <footer>footer</footer>  
</body>  
</html>

Beispielsweise so. Die transparenten border sind dazu da um die collapsing margins auszutricksen. Interessanterweise rendert FF10 im maximierten Fenster anders als in einem Browserfenster mit derselben Höhe.

Matthias

--
1/z ist kein Blatt Papier.

Beitrag melden
–
Informationen zu den Bewertungsregeln