1. !DOCTYPE htmlhtmlhead meta charset=utf- 8 " / style type= " text/css " html,body{ height: 100 % ; margin: 0 ; padding: 0 ; } header{ height: 100px; margin -bottom: - 100px; } .page{ box -sizing: border- box; min -height: 100 % ; padding
1.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<style type="text/css">
html,body{
height: 100%;
margin: 0;
padding: 0;
}
header{
height: 100px;
margin-bottom: -100px;
}
.page{
box-sizing: border-box; min-height: 100%; padding-top: 100px; padding-bottom: 200px;
}
footer{
height: 25px; margin-top: -25px;
}
</style>
</head>
<body>
<header>头部</header>
<section class="page">hkjjjjjjjjjjjjjjjjjddddddddddddddddddd哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈给哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</section>
<footer>页脚</footer>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<style type="text/css">
html,body{
height: 100%;
margin: 0;
padding: 0;
}
.container{
display: flex;
height:100%;
flex-flow: column;
}
header{
flex:0 0 auto;
}
.page{
flex:1 0 auto;
}
footer{
flex:0 0 auto;
}
</style>
</head>
<body>
<div class="container">
<header>头部</header>
<section class="page">内容</section>
<footer>页脚</footer>
</div>
</body>
</html>