粘滯頁腳和IE

我有一個問題，即當我包含一個浮動元素時，我的粘性頁腳不會粘到底部，它會坐在非浮動內容的末尾。粘滯頁腳和IE

我的目標是如果頁面內容沒有填滿整個頁面，並且頁面CONTENT底部的頁面內容溢出單頁高度時，頁面窗口底部會有FOOTER。

這裏是我的代碼：

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

這是推動我瘋了！

我用Google搜索，並嘗試嘉豪這種樣機測試頁面，但我吹下來，我解決不了:-(

我知道這事做花車，但我不能工作了這一點！

來源

2014-10-27 PurpleMonkey

其特別版本的IE（S）？ – 2014-10-27 22:06:46

IE 11感謝您的回覆 – PurpleMonkey 2014-10-27 22:17:12

布萊克有沒有什麼運氣？ – PurpleMonkey 2014-10-28 09:34:29

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 2014-10-27 22:13:31

這樣做雖然在任何時候都將頁腳粘在窗口的底部。如果內容溢出多個頁面高度，我需要它粘在內容的底部，如果內容沒有填充完整的窗口，則粘在窗口的底部。什麼也不能這樣做，雖然是坐在ontop的或過度的內容:-( 任何想法？ – PurpleMonkey 2014-10-27 22:13:51

這表明在任何時候，無論頁面的高度。我就需要1顯示在頁面如果底部內容不會填充整個窗口高度2.如果頁面內容流過單個窗口高度，則位於頁面內容的最底部。目前它位於底部而與內容高度無關 – PurpleMonkey 2014-10-27 22:21:32

回答

相關問題