Application Inquiry
I am seeking assistance with a web page that features a title, and a sticky menu bar at the top, allowing the rest of the space for displaying content. When a menu item is clicked, the objective is to load a page in the content at full width and height. However, after executing the loadPage script, only 8 lines of height are displayed. I have attempted several solutions from both stackoverflow and Google, without success. Even using an iframe did not result in 100% width and height coverage.
Please assist me in resolving this issue. Thank you in advance.
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 {
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>
...