Advanced Search

Return to Snippet

Revision: 19996
at November 4, 2009 12:27 by smoothdzion
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <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>

  <div id="header"></div>
  <div id="container">
    <iframe src="http://brandonbuttars.com"></iframe>
  </div>

</body>
</html>

Revision: 19995
at November 4, 2009 12:26 by smoothdzion
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<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>

  <div id="header"></div>
  <div id="container">
    <iframe src="http://brandonbuttars.com"></iframe>
  </div>

</body>
</html>

Revision: 19994
at November 4, 2009 12:25 by smoothdzion
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<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>

  <div id="header"></div>
  <div id="container">
    <iframe src="http://brandonbuttars.com"></iframe>
  </div>

</body>
</html>
Initial URL 









Initial Description





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.









Initial Title





iFrame - Full Page with Header









Initial Tags





css, textmate, html









Initial Language





HTML