<!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;
background-color: #a8acad;
min-width: 780px;/*加上最小宽度，不让浏览器变小时，破坏其布局*/
overflow: auto;/*出现滚动条*/
}
h1{margin:0}/* h1有外边距，要去掉*/
</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就可以填满了-->
<h1>后台布局3--absolute+overflow</h1>
<h1>主要用第3种布局。</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>
<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 class="page-footer"></div>
</body>
</html>
浙公网安备 33010602011771号