iFrame-带页眉的整页

Posted 2021-02-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iFrame-带页眉的整页相关的知识，希望对你有一定的参考价值。

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.

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

以上是关于iFrame-带页眉的整页的主要内容，如果未能解决你的问题，请参考以下文章

如何使QTextDocument适合打印机的整页宽度

Icefaces 1.8.2 中的整页刷新？