1

I try to stretch a DIV to the bottom of the page with a element above it. That basically works but the height of the element above it is added to the DIV.

Please see jsFiddle example: http://jsfiddle.net/CjKFX/

How to fix this?

Michael
  • 497
  • 2
  • 10
  • 22
  • 1
    duplicate of http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – Misch Oct 03 '12 at 19:47

1 Answers1

0

CSS:

html, body {height: 100%;}

#header, #headline { position:absolute; width:100%; top:0; }

#header {height: 100px; z-index:1; background-color:#f40; }
#headline {height: 100%; top:100px; margin-top:-100px; background: #000;}

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
        <header id="header">
            header
        </header>

        <section id="headline">
            section
        </section>

    </body>
</html>

http://jsfiddle.net/Zeggw/

​

Alex
  • 34,899
  • 5
  • 77
  • 90