47 lines
973 B
HTML
Executable File
47 lines
973 B
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>css上中下布局，上下固定，中间自适应滚动</title>
|
||
<style>
|
||
html, body {
|
||
/* 重点，不能少 */
|
||
height: 100%;
|
||
|
||
/* 这里一定要写上，否则外层会出现滚动条 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
header, footer {
|
||
height: 100px;
|
||
width: 100%;
|
||
background-color: pink;
|
||
}
|
||
|
||
.main {
|
||
width: 100%;
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<header>header</header>
|
||
<div class="main">
|
||
<p style="height: 500px">123</p>
|
||
<p style="height: 500px">456</p>
|
||
</div>
|
||
<footer>footer</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|