Member Avatar for dornaled

i creat a footer on my site so tell what can i do and what method try to creat a footer help me.
thanks and advances.

Edited by dornaled because: n/a
  • 4 Contributors
  • 5 Replies
  • 114 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by beaut

Dani AI

Generated

Good that this got solved. showed the older negative‑margin approach — it still works — but for anyone coming to this thread now, here are cleaner, more robust patterns and quick troubleshooting notes.

Use Flexbox column layout for a “push-to-bottom” footer (no negative margins). Wrap the page, make the page container a column flexbox, and let the main content grow:

<body>
  <div class="site">
    <header>...</header>
    <main class="content">...</main>
    <footer class="site-footer">...</footer>
  </div>
</body>

html, body { height: 100%; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; }
.site-footer { padding: 1rem; }

For an always-visible footer use position: fixed; bottom: 0; width: 100%; but avoid covering content by adding equivalent bottom padding to the main area. On devices with notches, include the safe-area inset:

.site-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; }
.content { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

Accessibility and semantics: use the <footer> element and add role="contentinfo" or an aria-label if you have more than one footer. Ensure keyboard focus order and contrast on footer links. Add a skip link for keyboard users where appropriate.

Troubleshooting checklist: if the footer overlaps content check for missing bottom padding, absolute-positioned ancestors, or fixed heights on children; use CSS variables for footer height to keep padding and footer in sync; test at different viewport sizes and print. This keeps layouts resilient and accessible years after initial implementation.

Recommended Answers

All 5 Replies

Member Avatar for JamieLynnSEO

Here's one method.

<div id="top"></div>
<div id="container">
    <p>The content goes here</p>
    <div id="footer-spacer"></div>   
</div>
<div id="footer">
    The footer goes here
</div>
Member Avatar for JamieLynnSEO

or for css:

html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}
#top {
    position: absolute;
}
h1, p {
    margin: 0;
    padding: 0.3em 0;
}
#container {
    min-height: 100%;
    margin-bottom: -36px;
}
* html #container {
    height: 100%;
}
#footer-spacer {
    height: 36px;
}
#footer {
    border-top: 1px solid #000;
    height: 35px;
}

hopefully this helps

Member Avatar for edith135

hi
yes i Agree with...JamieLynnSEO.....

Member Avatar for dornaled

thank for all i solve this.

Member Avatar for beaut

haha,then , i learn so much~~

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.