css左右布局

在后台管理系统中最常见的布局就是左右布局,左侧是菜单,宽度固定,右侧是主体内容,宽度自适应(占据剩余宽度),下面是一个简单的页面布局代码,记录学习!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于布局</title>
<style>
.left {
float: left;
width: 140px;
background-color: #aab;
height: 100%;
}
.right{
display: block;
overflow: hidden;
background-color: #a97
}
</style>
</head>
<body>
<div>
<!-- 左侧固定宽度菜单 -->
<div class="left">
<p>我是左侧菜单</p>
</div>
<!-- 右侧宽度自适应(占据剩余宽度)主体内容 -->
<div class="right">
<p>我是右侧主体内容</p>
</div>
</div>
</body>
</html>

如果想要是页面高度占据100%,可以添加以下css

1
2
3
4
5
6
html, body, div {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}

overflow: hidden; 是为了隐藏浏览器滚动条。margin padding是为了消除浏览器默认边距。

参考文章:

  1. http://www.webhek.com/css-100-percent-height
我知道是不会有人点的,但万一有人想不开呢!