| <html> |
| <head> |
| <style> |
| .middle { |
| background-color:green; |
| -moz-box-flex: 1; |
| -webkit-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: -webkit-box; |
| display: box; |
| -moz-box-orient: vertical; |
| -webkit-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> |
