<!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: absolute;
top: 90px;
left: 0;
bottom: 0;
width: 300px;
background-color: #e75e15;
}
.page-content .content{
position: absolute;
top: 90px;
right: 0;
bottom: 0;
left: 300px;
/*overflow: auto;!*出现滚动条*!*/
}
.page-content .content .text{
background-color: #a8acad;
}
</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">
<!-- //背景颜色加在这个DIV就可以填满了-->
<div class="text">
<h1>后台布局2</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
<h1>初次定位在屏幕，之后往上移动，用absolute定位即可。</h1>
</div>
</div>
</div>
<div class="page-footer"></div>
</body>
</html>
浙公网安备 33010602011771号