Posted By

smoothdzion on 11/04/09


Tagged

iframe css textmate html


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

smoothdzion
deiby


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.

  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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.  
  7. <title>Page with iFrame that FITS!</title>
  8.  
  9. <style type="text/css" media="screen">
  10. html, body {
  11. position: absolute;
  12. height: 100%;
  13. max-height: 100%;
  14. width: 100%;
  15. margin: 0;
  16. padding: 0;
  17. }
  18. iframe {
  19. position: absolute;
  20. height: 100%;
  21. width: 100%;
  22. border: none;
  23. }
  24. #container {
  25. position: absolute;
  26. top: 50px; /* Change with Height of #header */
  27. bottom: 0;
  28. width: 100%;
  29. overflow: hidden ;
  30. }
  31. #header {
  32. position: absolute;
  33. top: 0px;
  34. height: 50px; /* Change with top of #container */
  35. color: #eee;
  36. background-color: #ccc;
  37. width: 100%;
  38. }
  39. </style>
  40.  
  41. </head>
  42.  
  43.  
  44. <div id="header"></div>
  45. <div id="container">
  46. <iframe src="http://brandonbuttars.com"></iframe>
  47. </div>
  48.  
  49. </body>
  50. </html>

Report this snippet  

You need to login to post a comment.