All geek questions in one place

Sticky footer, more specifically: the content does not stretch to the footer

So I need a sticky footer on the page and

Here is what I have in html right now:

<div id="wrap"> <!-- start header --> <div id="header"> <div id="header-content"> </div> </div> <!-- end header --> <!-- start main --> <div id="main"> <div id="main-content"> </div> </div> <!-- end main --> </div> <!-- start footer --> <div id="footer"> </div>

And in css:

 html { height: 100%; } body { height: 100%;} /* wrap */ #wrap { min-height: 100%; } /* main */ #main { background-color: #43145c; overflow: auto; padding-bottom: 50px; } #main-content { width: 720px; margin: auto; background-color: #643280; padding-top: 20px; } #footer { position: relative; margin-top: -50px; height: 50px; clear: both; background: red; }

I tried to set the minimum height of the main to 100%, but did not work. I just want the backgroundcolor of the main content to get to the footer as it is different from the main and main blocks.

Is there any reason? Can anyone help?

+6
source share
4 answers

I know that this was asked 6 months ago, but I have been looking for a solution to this problem for a long time and I hope that other people will be able to use the solution that I used in the archive. You were there when you said that somehow the main drawer should get the minimum height of the space between the header and footer.

Unfortunately, I do not know how this can be done using pure CSS, but it is quite simple with javascript, but this solution is not always viable, and it is rather messy in terms of code separation. The good news is that depending on what you need to do, there is a CSS hack that you can use.

What I did was add an absolutely positioned element under the body, which essentially stretched below the header to the footer. So I could add a background or gradient to this #divBelowBody, which essentially allowed me to pretend that this problem was solved (although this solution leaves a bitter taste in my mouth).

Also, if you want to add a border around your div content and hoped that it would extend to the footer, even when the content was small, you would be wrapped (although I really don't think it's possible to make this workable) so it only works if you were hoping to add a background or gradient, etc.

Here you can see the code: http://jsfiddle.net/qHAxG/ Expand the results section horizontally to see more clearly what is happening.

+3
source

Try the following:

Replace the HTML and BODY styles in the stylesheet as follows:

 html,body {height: 100%;}

Then replace your wrapper as follows:

#wrap { min-height: 100%;
height: auto; }

Hope this helps.

+1
source

try it

HTML

 <body> <div id="wrap"> <!-- start header --> <div id="header"> <div id="header-content"> </div> </div> <!-- end header --> <!-- start main --> <div id="main"> <div id="main-content"> </div> </div> <!-- end main --> <div class="push"></div> </div> <!-- start footer --> <div id="footer"> </div> </body>

CSS

  * { margin: 0; padding: 0; } html, body { height: 100%; } /* wrap */ #wrap { background: green; height: auto !important; margin: 0 auto; } #wrap, #main, #main-content { margin-bottom: -50px; min-height: 100%; height: 100%; } /* main */ #main { background-color: #43145c; } #main-content { width: 720px; margin: 0 auto; background-color: #643280; } .push, #footer { height: 50px; } #footer { position: relative; background: red; }​
+1
source

see THIS : this may be useful. It looks like you want the div with the background color to stretch to the bottom. But the problem with the sticky footer is that it also stays at the bottom - getting rid of its way when the content goes through the presentation port. Therefore, he needs some distance (content height) to know how to do this. If this height is not indicated by actual content ... 100% is also not going to do the trick. because then the “sticky” footer really doesn't work ... it will be off the screen. What is it really 100%?

this whole thing upset me for a year ... but I always find a way to make it look the way I want, even if I can't make it function the way I want ... hope this link demonstration is above, maybe borrow another piece of the puzzle. Good luck

0
source

Source: https://habr.com/ru/post/909017/

More articles:


All Articles