html - Sticky Footer and IE -


I am having a problem with which I have a floating element, my sticky footer does not remain down to the bottom, This will sit down the end of non-elementary content.

My purpose is to place the footer at the bottom of the page window, if the page content does not fill the whole page, and if the page content is not above the content, then the page content is not on the page.

Here's my code:


  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "sticky.css" /> & Lt; Title & gt; Sticky Footer Test & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; NAV & gt; & Lt; Div id = "wrap" & gt; & Lt; P class = "navbargreen" & gt; Green Navigation Bar & lt; / P & gt; & Lt; / Div & gt; & Lt; / Neo & gt; & Lt; Main & gt; & Lt; Div id = "wrap" & gt; & Lt; P class = "redtext" & gt; Household Advertising & lt; / P & gt; & Lt; Div id = "box1" & gt; Flotter 1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Home & gt; & Lt; Footer & gt; Footer & lt; / Footer & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

  Here's my CSS: html {location: relative; Minimum height: 100%; Body {margin: 0 100px; / * Down = footer height * /} main {location: relative; Minimum height: 100%; } #wap {margin: 0 auto; Width: 960px; Height: auto; Minimum height: 100%; Padding: 0; Background color: yellow; } .navbargreen {height: 30px; Width: 960px; Background color: green color; } .redtext {background-color: red; Height: 3000px; } # Box 1 {float: left; Height: 400 pixels; Width: 300px; Background color: orange; } Footer {status: Completed; Left: 0; Bottom: 0; Height: 100 pixels; Width: 100%; Background color: purple; }  

This is driving me crazy!

I have searched and used a lot with this mockup test page, but blow me up I can not solve it: - (

I know that something floats in it , But I can not work it!

FIDDLE

  * {margin: 0;} html, body {height: 100%;} wrap {min-height: 100%; / * fuser height equal to * / margin-bottom: -70px;} Wrap: {Content: ""; Display: Block;} .site-footer. Wrap: To {Height: 70px;} Ksait-footer {background: orange;}  

Comments