html <object>不能以100％的高度呈现

时间：2018-09-12 05:24:48

标签： html css object innerhtml

应用说明

我有一个网页，顶部有一个title和一个menu bar，其余的是content。 menu bar滚动时，content是粘性的。单击菜单项时，目标是在content中以全宽和全高打开一个页面。当前，执行loadPage脚本后，高度仅显示8行。我尝试了stackoverflow和Google的各种解决方案，但没有任何效果。我已经尝试过iframe解决方案，但没有扩展到100％的宽度和/或100％的高度。

请帮助！预先感谢。

function loadPage(docName) {
  if (!document.getElementById("mainFrame"))
    return false;
  document.getElementById("mainFrame").innerHTML = '<object type="text/html" width="100%" heigth="100%" data="' + docName + '"></object>';
}
window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
    document.getElementById("navbar").style.marginTop = "0px";
  } else {
    document.getElementById("navbar").style.marginTop = "30px";
    navbar.classList.remove("sticky");
  }
}
html,
body {
  height: 100%;
  min-height: 100% width:100%;
  margin: 0;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

#titleFrame {
  /* Welcome to the CyberPlaypen */
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  line-height: 30px;
  width: 100%;
  font-weight: bold;
  overflow: hidden;
  /* Disable scrollbars. Set to "scroll" to enable*/
  text-align: center;
  color: white;
  background: navy;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  height: 24px;
  line-height: 24px;
  width: 100%;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  font-weight: normal;
  padding: 0px 16px;
  text-decoration: none;
  font-size: 14px;
}

#navbar a:hover {
  background-color: #ddd;
  font-weight: bold;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 54px;
}
<div id="titleFrame">Welcome to the CyberPlaypen</div>
<div id="navbar" style="margin-top: 30px;">
  <ul>
    <li><a href="#home">Labs</a></li>
    <li><a href="#ctfest">CTFest</a></li>
    <li><a href="#training">CodeFest</a></li>
    <li><a href="#powershack" onclick="loadPage('CyberPlaypenDoc.html');">PowerShack</a></li>
    <li><a href="#toolsoft">ToolSoft</a></li>
    <li><a href="#training">Training</a></li>
    <li><a href="#contact">Contact</a></li>
    <li style="float:right"><a href="#about">About</a></li>
  </ul>
</div>
<div id="mainFrame">
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
</div>

1 个答案:

答案 0 :(得分：0)

您需要将高度设置为mainFrame和object tag 

#mainFrame {
    height: 100%; 
}

#mainFrame object {
    height: 100%; 
}

示例 

function loadPage(docName) {
  if (!document.getElementById("mainFrame"))
    return false;
  document.getElementById("mainFrame").innerHTML = '<object type="text/html" width="100%" heigth="100%" data="' + docName + '"></object>';
}
window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
    document.getElementById("navbar").style.marginTop = "0px";
  } else {
    document.getElementById("navbar").style.marginTop = "30px";
    navbar.classList.remove("sticky");
  }
}
/* new */
#mainFrame {
    height: 100%;
}

#mainFrame object {
    height: 100%;
}

/* original */

html,
body {
  height: 100%;
  min-height: 100% width:100%;
  margin: 0;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

#titleFrame {
  /* Welcome to the CyberPlaypen */
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  line-height: 30px;
  width: 100%;
  font-weight: bold;
  overflow: hidden;
  /* Disable scrollbars. Set to "scroll" to enable*/
  text-align: center;
  color: white;
  background: navy;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  height: 24px;
  line-height: 24px;
  width: 100%;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  font-weight: normal;
  padding: 0px 16px;
  text-decoration: none;
  font-size: 14px;
}

#navbar a:hover {
  background-color: #ddd;
  font-weight: bold;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 54px;
}
<div id="titleFrame">Welcome to the CyberPlaypen</div>
<div id="navbar" style="margin-top: 30px;">
  <ul>
    <li><a href="#home">Labs</a></li>
    <li><a href="#ctfest">CTFest</a></li>
    <li><a href="#training">CodeFest</a></li>
    <li><a href="#powershack" onclick="loadPage('https://zh.wikipedia.org/wiki/Wiki');">PowerShack</a></li>
    <li><a href="#toolsoft">ToolSoft</a></li>
    <li><a href="#training">Training</a></li>
    <li><a href="#contact">Contact</a></li>
    <li style="float:right"><a href="#about">About</a></li>
  </ul>
</div>
<div id="mainFrame">
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet,
  </p>
</div>

相关问题
最新问题