恐怕我的问题很，脚，但是我真的找不到在Windows Phone Internet Explorer中将页脚推到页面底部的完美解决方案。基本上，我有这样的布局：
<head>
<style>
* {
margin: 0;
padding: 0;
color: white;
}
body {
display: flex;
flex-flow: column;
}
header {
background: blue;
}
main {
background: green;
flex: 1 0 auto; /* This kind of works, but there is definitely space between bottom of the footer and bottom of the screen */
flex: 1; /* Doesn't work at all, footer stays on top of the page like 'main' doesn't exist at all */
/* Both options work perfectly fine in Chrome and Edge */
}
footer {
background: red;
}
</style>
</head>
<body>
<header>Header here</header>
<main>Content here</main>
<footer>Footer here</footer>
</body>
除Windows Phone IE之外，此方法均可在任何地方使用。我尝试了很多选择，但是没人能正常工作。页脚高度可以动态更改，我不想在JavaScript中进行一些怪异的计算。另外，我不想修复页脚，应该将其压到底部。
[不确定这是否仍处于活动状态，但是这是一种处理页脚的常用javascript和CSS方法，它采用屏幕高度并将其与html正文中主要div的客户端高度进行比较。这应该在所有支持js的平台上都可以使用。
/* This is only being run on document ready, so will only trigger on page load/refresh, this may be ok for static pages, but for dynamic pages can be solved by bulding this into a function and calling it when necessary */
let clientHeight = screen.height;
let scrollHeight = document.getElementById('root').clientHeight;
console.log(clientHeight);
console.log(scrollHeight);
let isYOverflown = false
if(clientHeight < scrollHeight){
isYOverflown = true
}
console.log(isYOverflown)
if (isYOverflown == false){
/* If the y axis is not overflowing fix the footer to the bottom of the screen */
console.log('Fix footer')
document.getElementById('footerBar').style.position = 'absolute'
document.getElementById('footerBar').style.bottom = '0'
} else {
/* If the y axis is overflowing release the footer */
console.log('Float footer')
document.getElementById('footerBar').style.position = 'relative'
document.getElementById('footerBar').style.bottom = ''
}body{
margin: 0;
}
.navBar{
height:100px;
background-color: aquamarine;
}
.bodyContent{
background-color: cadetblue;
/* Adjust the height of the body content to trigger the overflow */
height: 100px;
}
#footerBar{
background-color: crimson;
height: 200px;
width:100%;
}<body>
<div id="root">
<div>
<header class="navBar">
header
</header>
<div class="bodyContent">
Body
</div>
<footer id="footerBar" >
Footer
</footer>
</div>
</div>
</body>这里是纯CSS解决方案。
* {
margin: 0;
padding: 0;
color: white;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-flow: column;
}
header {
background: blue;
height: 10%;
}
main {
background: green;
height: 80%;
flex: 1 0 auto; /* This kind of works, but there is definitely space between bottom of the footer and bottom of the screen */
flex: 1; /* Doesn't work at all, footer stays on top of the page like 'main' doesn't exist at all */
/* Both options work perfectly fine in Chrome and Edge */
}
footer {
background: red;
height: 10%;
}<body>
<header>Header here</header>
<main>Content here</main>
<footer>Footer here</footer>
</body>