JSFiddle - React, Tailwind, and code Playground

by marianico2

HTML

<p>Add the following lines of CSS to your stylesheet. The negative value for the margin in <code>.wrapper</code> is the same number as the height of <code>.footer</code> and <code>.push</code>. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).</p>
<ol class="code">
    <li>* {</li>
    <li class="indent">margin: 0;</li>
    <li>}</li>
    <li>html, body {</li>
    <li class="indent">height: 100%;</li>
    <li>}</li>
    <li>.wrapper {</li>
    <li class="indent">min-height: 100%;</li>
    <li class="indent">height: auto !important;</li>
    <li class="indent">height: 100%;</li>
    <li class="indent">margin: 0 auto -4em;</li>
    <li>}</li>
    <li>.footer, .push {</li>
    <li class="indent">height: 4em;</li>
    <li>}</li>
</ol>
<p>Follow this HTML structure. No content can be outside of the .wrapper and .footer <code>div</code> tags unless it is absolutely positioned with CSS. There should also be no content inside the .push <code>div</code> as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.</p>
<ol class="code">
    <li>&lt;html&gt;</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;</li>
    <li class="red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" href="layout.css" ... /&gt;</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;</li>
    <li class="red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="wrapper"&gt;</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Your website content here.&lt;/p&gt;</li>
    <li class="red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="push"&gt;&lt;/div&gt;</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="red">/</span>div&gt;</li>
    <li class="red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div...

CSS

#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:auto;
    width:100%;
    background:#999;
}
#footer p {
    margin: 20px;
    text-align: center;
}
/* Für ie6*/
 * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
::-webkit-scrollbar-track {
	background:
	border: skinny plain lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
	border-radius:10px;
}
::-webkit-scrollbar-thumb {
	background:
	border: skinny plain gray;
	border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
	background:
}