Member Avatar for MrXortex

G'day trying to fix this issue for over 2 weeks now.

I have made a footer but can't get it right to the bottom.. The problem is I have a slider that slides down to get some information. I want the footer to slide down with it too, I want the footer to be at the bottom, it should resize by itself, like if a person has a 22" monitor it should stay at the bottom and if the person has a 15" monitor is should do the same.

But I don't want the position:fixed; some of the text gets hidden behind the footer.

Just want it at the bottom.. like it should be able to scroll down too when slider is activated.

The image will explain everything I guess.

http://i.imgur.com/ASt7G.png

Code:

HTML:

<div class="footer_gray">
    <div class="inner_footer">
        <div class="footer_right">
            <p>For feedback or support: admin
        </div>
      <div class="footer_left">
        <p>Copyright © 2012<p>
    </div>
    </div>
</div>

THE CSS:

.footer_gray{

    padding: 10px;
    background: #CCC;
    text-align: center;
    line-height: 35px;
    color: #D4D4D4;
    font-size: 13px;
    text-align: center;
    text-shadow: white 0 1px 0;
    overflow: hidden;
    margin-top: 80px;
    position: relative;

    background-color: #F5F5F5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#FAFAFA));
    background-image: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
    background-image:    -moz-linear-gradient(top, #F5F5F5, #FAFAFA);
    background-image:      -o-linear-gradient(top, #F5F5F5, #FAFAFA);
    background-image:         linear-gradient(to bottom, #F5F5F5, #FAFAFA);

    border-top: 1px solid #EBEBEB;
}

Your help will be highly appreciated!

Thank you.

Edited by pritaeas because: Moved.
  • 5 Contributors
  • 10 Replies
  • 231 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by designershiv

Dani AI

Generated

A reliable, simple fix is to let the page layout itself as a vertical column so the footer sits at the bottom of the viewport when content is short and gets pushed down as the slider expands. That avoids the overlay problems caused by fixed/absolute positioning (the behavior seen after 's suggestion). and were right that positioning can pin the footer, but pinning is exactly why content can get hidden.

Example (modern, preferred)

<!-- structure -->
<body>
  <div class="site">
    <main class="main-content">
      <!-- main content and the sliding panel belong here -->
    </main>
    <footer class="site-footer">For feedback or support: admin (c) 2012</footer>
  </div>
</body>
/* CSS */
html, body { height:100%; margin:0; }
.site { min-height:100vh; display:flex; flex-direction:column; }
.main-content { flex:1; }   /* grows and shrinks, pushes footer */
.site-footer { padding:12px; background:#eee; text-align:center; }

Slider notes: the sliding panel must remain in the document flow so its expansion increases the height of .main-content. Use height-based animations (jQuery slideDown or a CSS transition on max-height) rather than transform/translate animations, because transforms do not change layout. Example:

.slide { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.slide.open { max-height:600px; } /* value large enough for content */

Fallback and troubleshooting: on old browsers use the classic "negative margin + spacer" sticky-footer technique. If the footer still overlays, inspect computed styles to confirm the footer's position and z-index and verify the slider element is not absolute or using transforms. This approach keeps the footer at page-bottom and ensures the slider pushes the page down instead of hiding behind the footer.

Recommended Answers

All 10 Replies

Member Avatar for urtrivedi

try to add following css styles to ur footer

bottom:0px;
z-index:50;
position:fixed;

Edited by urtrivedi
Member Avatar for AleMonteiro

Let me see if I understand: Even if the page doesn't fill the body height, you want the footer to be at the bottom. And when the page fill the body height, or get bigger than it, you want the footer to stay at the bottom of the page (bottom of the page, not bottom of the window).

Is that right?

Member Avatar for MrXortex

Yes.. I want it to be at the bottom of the page.

Member Avatar for urtrivedi

add this 2 also
left: 0px;
width: 100%;

Member Avatar for MrXortex

Nothing happened.. its just the same. :/

Member Avatar for urtrivedi

are u keeping it (footergray in body or its in another div)

Member Avatar for MrXortex

Alright, I managed to make it work.. but when I scroll down.. the footer stays fixed. How do I remove that fixed position and it show only at the bottom (like when you scroll at the bottom.

Member Avatar for tscina

have you tried

position:absolute;
bottom:0;
Member Avatar for designershiv

It simple buddy, give position relative to parent div of the footer and then give footer :

{
position : absolute;
top:0px; 
left: 0px;
}
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.