I've successfully implemented a footer that sticks to the bottom of each page as intended. However, I'm facing an issue when there's a large amount of text on a particular page that requires scrolling. The scroll continues beyond the footer, causing it to overlap with the bottom content of the page.
My goal is to have the site scroll while ensuring that the footer remains below and not over the page content. How can I achieve this?
Below is my master page:
HTML code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Styles/MasterStyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/Scripts/ShoppingCartSideMenuJavaScript.js") %>"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/Scripts/MasterMenuJavaScript.js") %>"></script>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="mask">
</div>
<div id="ShoppingCartSideMenu">
<div id="CartMenuTop">
<div>
<img id="menu-close" src="/Images/Icons/X-icon.png" />
</div>
<div id="CartHeader">
Cart
</div>
</div>
</div>
<div class="wrapper">
<h1 id="SiteTitle">JEWELRY</h1>
<p id="UnderSiteTitle">EXCLUSIVE SWISS MADE JEWELRY</p>
<div id="menu">
<ul>
<li><a href="Home.aspx">HOME</a></li>
<li><a href="Shop.aspx">SHOP</a></li>
<li><a href="About.aspx">ABOUT</a></li>
<li><a href="TermsAndConditions.aspx">Terms & Conditions</a></li>
<li><a href="Contact.aspx">CONTACT</a></li>
<li id="seperator">|
</li>
<li>
<div id="CartImage">
<a id="ShoppingCartBtn">
<img class="ShoppingCart" src="/Images/Icons/Shopping_cart.png" />
<label id="CountCartItems">0</label>
</a>
</div>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer>
<div class="FooterWrapper">
<div id="FooterDiv1">
© 2016 JEWELRY - Created by nirh1989
</div>
<div id="FooterDiv2">
<a href="#">
<img id="FooterFacebook" class="Icons" alt="Facebook" src="/Images/Icons/facebook-logo.png" /></a>
<a href="#">
<img id="FooterTwitter" class="Icons" alt="Twitter" src="/Images/Icons/twitter-logo.png" /></a>
<a href="#">
<img id="FooterInstagram" class="Icons" alt="Instagram" src="/Images/Icons/instagram-logo.png" /></a>
</div>
</div>
</footer>
</form>
</body>
</html>
CSS code:
body {
}
form {
margin-bottom: 100px;
}
/* Additional CSS styles are included in the original text */
To better understand the issue, please refer to the image example https://i.stack.imgur.com/I4LmR.png