Advanced Search

iFrame - Full Page with Header

/ Published in: HTML
Save to your folder(s)
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

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.