<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构