I am working on a page for our highschool mun team and have done no design yet, just trying to get the individual parts working.
What I am stuck on now is using JavaScript to make my content div fill the rest of the pages vertical height.
Here is my HTML, maybe I am just out of it, but it appears as though everything is labeled correctly and should work.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>NCHS MUN</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function resize()
{
document.getElementById("content").style.height = (document.body.clientHeight - document.getElementById("top"));
}
</script>
</HEAD>
<BODY onLoad="resize()">
<div id="top">
<header><a href="index.html" class="title">NCHS Model UN</a></header>
<ul class="nav">
<li><a href="#">Updates</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
</div>
</BODY>
</HTML>
Here is my CSS, again, everything should work.
HTML, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: arial;
background-color: #D0D0D0;
}
header {
display: block;
background-color: #0000FF;
color: #FFFFFF;
width: 100%;
}
a.title {
display: block;
width: 100%;
text-align: center;
color: #FFFFFF;
text-decoration: none;
text-align: center;
padding-top: 2px;
font-size: 72px;
}
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul.nav li {
display: inline;
float: left;
background-color: #FFA500;
width: 20%;
border: 1px solid black;
box-sizing: border-box;
}
ul.nav li a {
display: block;
padding: 5px;
color: #000000;
text-decoration: none;
text-align: center;
}
ul.nav li a:hover {
font-weight: bold;
}
#content {
display: block;
overflow: auto;
background-color: #FFFFFF;
width: 960px;
margin: 0 auto;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
box-sizing: border-box;
}
However, when the page does load, only the border of the "content" div appears. Why is it not expanding to the rest of the page? Thanks.