div高度自适应

<!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>吾学网 – 5xue.cc – div高度自适应</title>
<style>
*{
  margin: 0 auto;
  padding: 0;
}
html, body{
  width: 100%;
  height: 100%;
}
.frame{
  text-align: center;
  width: 100%;
  min-height: 100%;
}
.frame .head{
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  background: #fff;
}
.frame .content{
  width: 100%;
  line-height: 60px;
  position: fixed;
  top: 40px;
  bottom: 30px;
  background: #336699;
  overflow: auto;
}
.frame .foot{
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  background: green;
}
</style>
</head>
<body>
<div class='frame'>
  <div class='head'>head</div>
  <div class='content'>高度自适应区域<br />1<br />2<br />3<br />4<br />5<br />6<br />7</div>
  <div class='foot'>foot</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>吾学网 – 5xue.cc – div高度自适应</title>

<style>

margin: 0 auto;

padding: 0;

}

html, body{

width: 100%;

height: 100%;

}

.frame{

text-align: center;

width: 100%;

min-height: 100%;

}

.frame .head{

width: 100%;

height: 40px;

position: fixed;

top: 0;

background: #fff;

}

.frame .content{

width: 100%;

line-height: 60px;

position: fixed;

top: 40px;

bottom: 30px;

background: #336699;

overflow: auto;

}

.frame .foot{

width: 100%;

height: 30px;

position: fixed;

bottom: 0;

background: green;

}

</style>

</head>

<body>

<div class='content'>高度自适应区域<br />1<br />2<br />3<br />4<br />5<br />6<br />7</div>

</div>

</body>

</html>

浏览样例