IE11上的粘性頁腳
[英]sticky footer on IE11
問題描述
無法在IE11上使用粘性頁腳.. Chrome看起來不錯。 很肯定這里的問題是min-height ，就不能找到解決的方式（需要保持HTML結構完好，無包裝，只是CSS改變）。
<!DOCTYPE html> <html style="height:100%"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body style="height:100%;background:grey"> <div style="height:100%"> <div style="min-height:100%;background:white;display:flex;flex-direction:column"> <header style="background:green">hello</header> <main>me mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome main</main> <footer style="background:yellow;margin-top:auto">sticky footer</footer> </div> </div> </body> </html>
編輯：左為鉻，右邊是IE11：
1 個解決方案
解決方案1
0 2019-04-03 07:49:05
我建議您也可以使用follownig代碼使其在IE中運行。
CSS
<style>
html {
display: flex;
}
body {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.header {
flex-shrink: 0;
background: green;
}
.footer {
flex-shrink: 0;
background: yellow;
}
.content {
flex-grow: 1;
}
</style>
HTML
<header class="header">hello</header>
<main class="content">me mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome mainsome main</main>
<footer class="footer">sticky footer</footer>
Twitter Bootstrap 3 Sticky Footer在IE11和IE Edge上不起作用
[英]Twitter Bootstrap 3 Sticky Footer not working on IE11 and IE Edge
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.