I am having an issue keeping a footer at the bottom of the page. With the current code, the footer seems to be at the bottom of the screen (not bottom of the page). When I scroll, it doesn't stay at the bottom (see screenshots of page first loaded and page after scroll).
Below is my html code:
<body class="home page-template-default page page-id-2 logged-in custom-background wp-custom-logo wp-embed-responsive singular missing-post-thumbnail has-no-pagination not-showing-comments show-avatars footer-top-hidden">
<a class="skip-link screen-reader-text" href="#site-content">Skip to the content</a>
<div id="mysticky-wrap" style="">
<div id="mysticky-nav" class="up" style="top: 0px;">
<header id="site-header" class="header-footer-group" role="banner" style=""></header>
</div>
</div>
<!-- #site-header -->
<div class="menu-modal cover-modal header-footer-group" data-modal-target-string=".menu-modal">
<div class="menu-modal-inner modal-inner">
<div class="menu-wrapper section-inner">
<div class="menu-top">
<button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal">
<span class="toggle-text">Close Menu</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<polygon fill="" fill-rule="evenodd" points="6.852 7.649 .399 1.195 1.445 .149 7.899 6.602 14.352 .149 15.399 1.195 8.945 7.649 15.399 14.102 14.352 15.149 7.899 8.695 1.445 15.149 .399 14.102"></polygon>
</svg>
</button>
<!-- .nav-toggle -->
<nav class="mobile-menu" aria-label="Mobile" role="navigation">
<ul class="modal-menu reset-list-style">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108">
<div class="ancestor-wrapper"><a href="https://axpsolutions.co.uk/staging/2490/?page_id=105">GALLERY</a></div>
<!-- .ancestor-wrapper -->
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20">
<div class="ancestor-wrapper"><a href="https://axpsolutions.co.uk/staging/2490/" aria-current="page">GET A FREE QUOTE</a></div>
<!-- .ancestor-wrapper -->
</li>
</ul>
</nav>
</div>
<!-- .menu-top -->
<div class="menu-bottom"></div>
<!-- .menu-bottom -->
</div>
<!-- .menu-wrapper -->
</div>
<!-- .menu-modal-inner -->
</div>
<!-- .menu-modal -->
<main id="site-content" role="main">
<article class="post-2 page type-page status-publish hentry" id="post-2">
<header class="entry-header has-text-align-center header-footer-group">
<div class="entry-header-inner section-inner medium">
<h1 class="entry-title">Sample Page</h1>
</div>
<!-- .entry-header-inner -->
</header>
<!-- .entry-header -->
<div class="post-inner thin">
<div class="entry-content">
<section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-undefined uagb-block-9c6d64ba">
<div class="uagb-section__overlay"></div>
<div class="uagb-section__inner-wrap">
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
<p>Test this content for scrolling</p>
</div>
</section>
</div>
<!-- .entry-content -->
</div>
<!-- .post-inner -->
<div class="section-inner">
<div class="post-meta-wrapper post-meta-edit-link-wrapper">
<ul class="post-meta">
<li class="post-edit meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path
fill=""
d="M14.7272727,11.1763636 C14.7272727,10.7244943 15.0935852,10.3581818 15.5454545,10.3581818 C15.9973239,10.3581818 16.3636364,10.7244943 16.3636364,11.1763636 L16.3636364,15.5454545 C16.3636364,16.9010626 15.2646989,18 13.9090909,18 L2.45454545,18 C1.09893743,18 0,16.9010626 0,15.5454545 L0,4.09090909 C0,2.73530107 1.09893743,1.63636364 2.45454545,1.63636364 L6.82363636,1.63636364 C7.2755057,1.63636364 7.64181818,2.00267611 7.64181818,2.45454545 C7.64181818,2.9064148 7.2755057,3.27272727 6.82363636,3.27272727 L2.45454545,3.27272727 C2.00267611,3.27272727 1.63636364,3.63903975 1.63636364,4.09090909 L1.63636364,15.5454545 C1.63636364,15.9973239 2.00267611,16.3636364 2.45454545,16.3636364 L13.9090909,16.3636364 C14.3609602,16.3636364 14.7272727,15.9973239 14.7272727,15.5454545 L14.7272727,11.1763636 Z M6.54545455,9.33890201 L6.54545455,11.4545455 L8.66109799,11.4545455 L16.0247344,4.09090909 L13.9090909,1.97526564 L6.54545455,9.33890201 Z M14.4876328,0.239639906 L17.7603601,3.51236718 C18.07988,3.83188705 18.07988,4.34993113 17.7603601,4.669451 L9.57854191,12.8512692 C9.42510306,13.004708 9.21699531,13.0909091 9,13.0909091 L5.72727273,13.0909091 C5.27540339,13.0909091 4.90909091,12.7245966 4.90909091,12.2727273 L4.90909091,9 C4.90909091,8.78300469 4.99529196,8.57489694 5.14873082,8.42145809 L13.330549,0.239639906 C13.6500689,-0.0798799688 14.1681129,-0.0798799688 14.4876328,0.239639906 Z"
></path>
</svg>
</span>
<span class="meta-text">
<a href="https://axpsolutions.co.uk/staging/2490/wp-admin/post.php?post=2&action=edit">Edit <span class="screen-reader-text">Sample Page</span></a>
</span>
</li>
</ul>
<!-- .post-meta -->
</div>
<!-- .post-meta-wrapper -->
</div>
<!-- .section-inner -->
</article>
<!-- .post -->
</main>
<!-- #site-content -->
<footer id="site-footer" role="contentinfo" class="header-footer-group"></footer>
<!-- #site-footer -->
</body>
Here is the css relation to the footer and content (the code which puts the element .entry-content at the top (top: 0; I need that to remain):
#site-footer{
opacity:0.9;
position:absolute;
bottom: 0;
width:100%;
}
html, body {
height: 100%;
}
.entry-content{
position:absolute;
top: 0;
}
Here are screenshots below. The footer is the one that contains the copyright.
