在chrome浏览器中，采用flexbox布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body,
div,
header,
section,
footer {
margin: 0;
padding: 0;
}
#app {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
background-color: aquamarine;
text-align: center;
}
header {
height: 50px;
background-color: greenyellow;
}
section {
flex: 1 0 auto;
}
footer {
height: 60px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<header>this is a header</header>
<section>this is a section.</section>
<footer>this is a footer.</footer>
</div>
</body>
</html>
在支持flex布局的chrome浏览器中打开，没有问题。但是在IE11中打开，缺没有想要的效果。
为了兼容IE11,在网上搜寻了个方法，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body,
div,
header,
section,
footer {
margin: 0;
padding: 0;
}
#app{
display: flex;
}
#page {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
background-color: aquamarine;
text-align: center;
}
header {
height: 50px;
background-color: greenyellow;
}
section {
flex: 1 0 auto;
}
footer {
height: 60px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div id="page">
<header>this is a header</header>
<section>this is a section.</section>
<footer>this is a footer.</footer>
</div>
</div>
</body>
</html>
如此，对于IE11也有效果了。
网友评论