<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css后台布局</title>
<style>
body{ margin:0}/* 去掉边框，*/
.page-header{
height: 90px;
background-color: #8e908c;
}
.page-content .menu{
position: fixed;
top: 90px;
left: 0;
bottom: 0;
width: 300px;
background-color: #e75e15;
}
.page-content .content{
position: fixed;
top: 90px;
right: 0;
bottom: 0;
left: 300px;
background-color: #a8acad;
overflow: auto;/*出现滚动条*/
}
</style>
</head>
<body>
<div class="page-header"></div>
<div class="page-content">
<div class="menu">
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
<h1>菜单一</h1>
</div>
<div class="content">
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
<h1>style:min-width:200px 最小宽度，有些浏览器不支持。</h1>
</div>
</div>
<div class="page-footer"></div>
</body>
</html>
浙公网安备 33010602011771号