html - Sticky footer, but with a twist -


Therefore, I already know that to create a sticky footer, mainly using this method:

He said, I'm trying a bit differently:

Currently, I try to keep all the contents of my website at the bottom of the Stick page The footer above it, it looks like something:


Header


Blank space (this gap stops because more content Od is)

|

|

|

|

|


The content (sticks to the top of the footer)


The footer (sticks at the bottom of the page)


The more content is added, the more content gets UP to the top, while the footer sticks to the bottom is quite simple.

I am trying to figure out how I can do this so that once the content is sufficient (and at the bottom of the header) to reach the top of the page, Turn off the footer from the bottom of the screen, then start.

As far as the code happens, I really do not know where it starts, though I would like to avoid the script and if possible it should put the pure CSS. Any ideas?

I have no way of completing css with CSS in the form of media queries Do not compare the variable and it is not a place where media questions can be helpful; However, the jQuery solution is quite easy. Run the function like this in content changes:

  function addSomethingToContent () {var cHeight = parseInt ($ ("# content"). Height ()); Var hHeight = parseInt ($ ("# header") height ()); Var fHeight = parseInt ($ ("# footer") height ()); Var wHeight = parseInt ($) .ht ()); If ((cHeight + hHeight + fHeight)> wHight) {$ ("# footer"). CSS ({"bottom": (wHyight - (cHeight + hHyight + fHeight) "+ ​​px"}); } And {$ ("# footer"). CSS ("Below", "0 Pixel"); }}   

Assume that your footer is located in the CSS using the below property at the bottom of the page, it will slide the furs down from the bottom The sum of heights and height of the window.

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -