I am currently working on a website with multiple pages. To streamline the process, I have opted to use server-side includes for the header and site contents bar across all pages. However, I am facing difficulty in getting the footer positioned at the bottom of each page.
Despite trying various solutions from Stack Overflow, it seems that the height of the help contents (utilizing JQuery accordion) is causing trouble. I suspect there might be an issue with the CSS formatting or something missing from the HTML code.
I wonder if there could be a more efficient way to achieve the inclusion of headers and footers without duplicating the HTML code on every page. The link to a sample page containing a footer can be accessed here.
Below is a snippet of the HTML code used in the mentioned page:
<body>
<div class="page-content">
<!--#include file="../../../_includes/header.shtml"-->
<div class="container">
<h2 class="container-header">About Widget</h2>
<div>
<p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p>
</div>
<div class="widget-header-figure-container">
<figure>
<img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget">
<figcaption class="figure-caption">About widget highlighted in red</figcaption>
</figure>
</div>
<div>
<p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p>
<p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p>
</div>
</div>
<footer>
<!--#include file="../../../_includes/footer.shtml"-->
</footer>
</div>
</body>
Here is the sample CSS corresponding to the above code:
html {
font-size: 62.5%;
height: 100%;
}
body {
background-color: #d2d2d2;
font-family: 'Cuprum';
height: 100%;
}
.page-content {
min-height: 100%;
position: relative;
}
#footer-container {
width: 100%;
height: 150px;
background-color: #797986;
bottom: 0;
position: absolute;
text-align: center;
}