Липкий нижний колонтитул и IE

У меня возникла проблема, при которой, когда мой содержит плавающий элемент, мой липкий нижний колонтитул не прилипает к дну, он будет сидеть в конце неплавающего содержимого.Липкий нижний колонтитул и IE

Мое намерение состоит в том, чтобы в нижней части окна страницы находился ПЛОТЕР, если содержимое страницы не заполняет всю страницу, а в нижней части страницы СОДЕРЖАНИЕ, когда содержимое переполняет одну высоту страницы.

Вот мой код:

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="sticky.css"/> 
    <title>Sticky Footer Test</title> 
</head> 

<body> 

<nav> 
    <div id="wrap"> 
     <p class="navbargreen">Green Navigation Bar</p> 
    </div> 
</nav> 

<main> 
    <div id="wrap"> 
     <p class="redtext">Lorem ipsum</p> 
     <div id="box1">Floater 1</div> 
    </div> 
</main> 

<footer>footer</footer> 

</body> 

</html>

Here is my CSS: 

html { 
position: relative; 
min-height: 100%; 
} 

body { 
margin: 0 0 100px; /* bottom = footer height */ 
} 

main { 
position: relative; 
min-height: 100%; 
} 

#wrap { 
margin: 0 auto; 
width: 960px; 
height: auto; 
min-height: 100%; 
padding: 0; 
background-color: yellow; 
} 

.navbargreen { 
height: 30px; 
width: 960px; 
background-color: greenyellow; 
} 

.redtext { 
background-color: red; 
height: 3000px; 
} 

#box1 { 
float: left; 
height: 400px; 
width: 300px; 
background-color: orange; 
} 

footer { 
position: absolute; 
left: 0; 
bottom: 0; 
height: 100px; 
width: 100%; 
background-color: purple; 
}

Это сводит меня с ума!

Я гугле искал и экспериментировал в изобилии с этой тестовой страницы макета, но удар меня вниз, я не могу решить его :-(

Я знаю, что есть что-то делать с плавающей точкой, но я не могу решить эту проблему!

источник

2014-10-27 PurpleMonkey

Какая версия (ы) IE, в частности? –

IE 11 спасибо за ответ – PurpleMonkey

У вас была удача Блейк? – PurpleMonkey

FIDDLE

http://jsfiddle.net/czgoxafr/27/

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 

.wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -70px; 
} 
.wrap:after { 
    content: ""; 
    display: block; 
} 
.site-footer, .wrap:after { 
    height: 70px; 
} 
.site-footer { 
    background: orange; 
}

источник

2014-10-27 22:07:14

Огромное спасибо за то, что вернулись ко мне так быстро! – PurpleMonkey

То, что это сделало, все время затыкает нижний колонтитул в нижней части окна. Мне нужно, чтобы он находился в нижней части содержимого, если контент разливается более чем на одну высоту страницы и придерживается нижней части окна, если содержимое не заполняет полное окно. Что он не должен делать, хотя это сидеть наверх или по содержанию :-( Любые идеи? – PurpleMonkey

Это показывает, во все времена, независимо от высоты страницы. мне это нужно, чтобы 1. Показать в нижней части страницы, если содержимое не заполняет всю высоту окна 2. Сядьте в самом конце страницы CONTENT, если содержимое страницы перетекает более чем на одну высоту окна. В настоящее время оно находится внизу, независимо от высоты содержимого – PurpleMonkey

Липкий нижний колонтитул и IE

ответ

Смежные вопросы