<!DOCTYPE html>标签:定位,013,初次,即可,屏幕,移动,css,absolute From: https://www.cnblogs.com/lfyxys/p/16914793.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>