Posted By

smoothdzion on 11/04/09

Tagged

Versions (?)

Last Edited at 11/04/09 12:25pm

Statistics

Viewed 1414 times

Favorited by 1 user(s)

Related snippets

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.

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Page with iFrame that FITS!</title>
	
  <style type="text/css" media="screen">
  html, body {
     position: absolute;
     height: 100%;
     max-height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
   }
   iframe {
     position: absolute;
     height: 100%;
     width: 100%;
     border: none;
   }
   #container {
     position: absolute;
     top: 50px; /* Change with Height of #header */
     bottom: 0;
     width: 100%;
     overflow: hidden ;
   }
   #header {
     position: absolute;
     top: 0px;
     height: 50px; /* Change with top of #container */
     color: #eee;
     background-color: #ccc;
     width: 100%;
   }
  </style>
	
</head>

<body>

</body>
</html>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.