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