<html> <head> <style> .middle { background-color:green; -moz-box-flex: 1; -khtml-box-flex: 1; box-flex: 1; border: 10px solid olive; } html { background-color: white; height: 100%; } body { height: 100%; margin: 0px; } div.outer { display: -moz-box; display: -khtml-box; display: box; -moz-box-orient: vertical; -khtml-box-orient: vertical; box-orient: vertical; height: 100%; width: 100%; } </style> </head> <body> <div class="outer"> <div> This header should remain at the top of the browser window as you resize it. It can wrap to multiple lines. The center should be filled with an olive-bordered green box. It should start beneath the header, end above the footer, and fill the width of the browser window. </div> <!--<div class="middle"></div>--> <iframe class="middle" style="display: block; width:99%" src="about:blank"></iframe> <div> This footer should remain at the bottom of the browser window. It can wrap to multiple lines if necessary. </div> </div> </body> </html>