advanced code snippet search

Posted By

smoothdzion on 11/04/09


Tagged

iframe css textmate html


Versions (?)


Advertising

Submit Site


Who likes this?

1 person has marked this snippet as a favorite

smoothdzion


iFrame - Full Page with Header

Published in: HTML 

This code will allow you to have a full screen iframe with a header like a lot of sites do when navigating outside their site or featuring templates and things. Reference your CSS however you want. The HTML is necessary how it is, but add any additional code inside the header div.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8.   <title>Page with iFrame that FITS!</title>
  9.  
  10.   <style type="text/css" media="screen">
  11.   html, body {
  12.      position: absolute;
  13.      height: 100%;
  14.      max-height: 100%;
  15.      width: 100%;
  16.      margin: 0;
  17.      padding: 0;
  18.    }
  19.    iframe {
  20.      position: absolute;
  21.      height: 100%;
  22.      width: 100%;
  23.      border: none;
  24.    }
  25.    #container {
  26.      position: absolute;
  27.      top: 50px; /* Change with Height of #header */
  28.      bottom: 0;
  29.      width: 100%;
  30.      overflow: hidden ;
  31.    }
  32.    #header {
  33.      position: absolute;
  34.      top: 0px;
  35.      height: 50px; /* Change with top of #container */
  36.      color: #eee;
  37.      background-color: #ccc;
  38.      width: 100%;
  39.    }
  40.   </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45.  
  46.   <div id="header"></div>
  47.   <div id="container">
  48.     <iframe src="http://brandonbuttars.com"></iframe>
  49.   </div>
  50.  
  51. </body>
  52. </html>

Report this snippet 

You need to login to post a comment.

Download royalty free graphics