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

0

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

Мой Aim должен иметь FOOTER в нижней части окна страницы, если содержимое страницы не заполняет всю страницу, а в BOTTOM страницы CONTENT, когда контент переполняет одну высоту страницы.

Вот мой код:

<!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;
}

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

Я искал googled и экспериментировал в изобилии с этой тестовой страницей макета, но взорвал меня. Я НЕ МОГУ ее решить :-(

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

  • 0
    Какая версия IE в частности?
  • 0
    IE 11 спасибо за ваш ответ
Показать ещё 3 комментария
Теги:
footer

1 ответ

0

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;
}
Поделиться
  • 0
    Большое вам спасибо за то, что так быстро вернулись ко мне!
  • 0
    Хотя это все-таки застряло в нижней части окна в нижней части окна. Мне нужно, чтобы он прикреплялся к нижней части содержимого, если содержимое превышает более чем одну высоту страницы, и придерживался нижней части окна, если содержимое не заполняет полное окно. Чего он не должен делать, так это сидеть поверх или над контентом :-( Есть идеи?
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню