StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Pretty easy! Make a footer that is positionated absolute and has a lower z-index than the main content. Than put this in the css of the div that you just created : position:fixed . Also don't forget to make the high of the content div a bit shorter so the footer will be seen.</p> <p>Good luck!</p> <p>Too vague? Just ask and i will answer!</p> <p>[edit]: </p> <p><a href="http://jsfiddle.net/Me2Dz/1/">fiddle example</a></p> <p>For the example i will use a simple <code>HTML</code> page which will contain two <code>divs</code>. The fist one will be the <code>#content</code> container and the second will be the <code>#footer</code>. </p> <pre><code><div id="content"> </div> <div id="footer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero felis quis nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim eros nisi, ut vehicula nulla dictum vel. Aenean quis felis libero. Aliquam vulputate sem eros, sed vehicula sem tincidunt vel.</p> </div> </code></pre> <p>//I added some text in the footer so you can actually see the parallax effect</p> <p>I added to the content <code>div</code> the fallowing <code>CSS</code> :</p> <pre><code> #content { width:100%; height:1500px; margin-bottom:200px; background-color:#123456; } </code></pre> <p>Be careful to set the <code>margin-bottom</code> property to be equal to your footer <code>height</code>. Otherwise you wont be able to see the <code>#footer</code> div.</p> <p>The <code>css</code> for the footer is:</p> <pre><code> #footer { position:fixed; bottom:0; left:0; width:100%; height:200px; z-index:-1; background-color:#000; } </code></pre> <p>Note the fact that the <code>position</code> is set to <code>fixed</code>. That will keep the <code>#footer</code> positioned relative to the window, not relative to the document. Also i set the <code>z-index:-1</code>. I did that so the <code>#footer</code> will be under the <code>#content</code>. If you remove this property you will notice that the <code>#footer</code> will be over the <code>#content</code> all the time and the effect of parallax is lost. </p> <p>So yeah! This is all.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload