I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success:
My goal is for the green menu section to extend down to the footer.
Here is the HTML code:
<div id="navigation">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Contact.aspx">Contact Admin</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/About.aspx">About</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/JobDescriptionForm.aspx">Job Questionnaire</asp:HyperLink>
<br />
<br />
<div class="additionalTools">
<asp:ContentPlaceHolder ID="LeftNavCont" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="mainContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<asp:Label ID="lblFooter" runat="server"></asp:Label>
</div>
</form>
And here is the CSS code:
#header {
background-color: white;
padding: 5px;
}
#navigation {
background-color: #009900;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
float: left;
padding: 10px;
}
#mainContent {
width: 70%;
float: left;
padding: 10px;
}
#footer {
background-color: white;
color: black;
clear: both;
text-align: center;
padding: 5px;
}
I have tried setting the height of the entire page and the navigation div to 100%, but it did not work. I also attempted manually adjusting the height using pixels (800px), but this approach made the layout less dynamic. Any suggestions on how I can achieve my desired outcome? Thank you!