G'day.
I created a simple FAQ page but the last line gets hidden behind the footer. I know why because the footer postion is set to fixed and I want it to be at the bottom too.
Better explanation: http://i.imgur.com/eHZdv.png
I don't see the need for posting any code right? I just need another solution for the footer to be at the bottom and also the text should be seen.
Thanks.
For 's FAQ: a fixed footer will always sit on top of page content unless you explicitly reserve space for it. Two practical, maintainable fixes used in production are shown below — pick one that fits your layout:
Option A — keep the footer fixed but reserve space for it (simple, reliable)
<body>
<div class="site-wrap">
<main>…FAQ content…</main>
</div>
<footer class="site-footer">Footer</footer>
</body>.site-footer {
position: fixed;
left: 0; right: 0; bottom: 0;
height: 60px; /* set a known height */
z-index: 1000;
}
.site-wrap {
padding-bottom: 60px; /* reserve the footer height so last line isn't hidden */
box-sizing: border-box;
}If the footer height can change (responsive text, wrapping), set a CSS variable from JS so the padding always matches:
function syncFooterPadding(){
const f = document.querySelector('.site-footer');
document.documentElement.style.setProperty('--footer-h', f.offsetHeight + 'px');
document.querySelector('.site-wrap').style.paddingBottom = getComputedStyle(document.documentElement).getPropertyValue('--footer-h');
}
window.addEventListener('load', syncFooterPadding);
window.addEventListener('resize', syncFooterPadding);Option B — avoid fixed positioning and use a modern “sticky” footer with flexbox (preferred for most sites)
html, body { height: 100%; margin: 0; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; } /* main grows to push footer to bottom when content is short */
footer { height: 60px; }Notes and gotchas: ’s buffer idea is the same concept as the padding approach but padding is cleaner. Avoid using floats for whole-layout positioning — use flexbox. Check z-index only to control stacking; it won’t prevent content being hidden unless you reserve space. On mobile, fixed footers can interact poorly with on-screen keyboards, so test there. If these don’t solve the exact case, inspect the computed footer height and any negative margins or absolutely positioned elements that might also be overlapping.
Jump to Post— GliderPilot 33Its diffacult to help when we don't have any code, how can we suggest "another" solution when we don't know what you're doing now? On a side note, this is an HTML CSS issue not a PHP issue so it's posted in the wrong place as well.
Generally, if you …
Jump to Post— DarkMonarch 1is right, this sounds like a html/css problem.
have a fixed position for header and content also ?
fixed height ?maybe try a new approach like float: left for header and content and clear:both for the …
anyone?
Its diffacult to help when we don't have any code, how can we suggest "another" solution when we don't know what you're doing now? On a side note, this is an HTML CSS issue not a PHP issue so it's posted in the wrong place as well.
Generally, if you want a fixed footer on the bottom you need to make a "buffer" div on the bottom of your actual page (after the last line) which is the same height as the footer that way the only thing that ever gets hidden is that buffer div which contains nothing.
is right, this sounds like a html/css problem.
have a fixed position for header and content also ?
fixed height ?
maybe try a new approach like float: left for header and content and clear:both for the footer.
and some problematic code would help us help you :)
Please show us what you have so we can make everyone's job easier :)
If you have this site online, providing the URL will be sufficient.
Please give some code with the third button ^
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.