Css布局--左边固定右边自适应两列布局

一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),左右两列,等高布局,左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)请写出大概的css代码

实现左右两列布局

Flex

1
2
3
4
5
//html
<div class="box">
<div class="left">111</div>
<div class="right">22</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//css
.box {
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #c3c3c3;
}
.left {
flex-basis:100px;
-webkit-flex-basis: 100px;
/* Safari 6.1+ */
background-color: red;
height: 100%;
}
.right {
background-color: blue;
flex-grow: 1;
}

浮动布局

1
2
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
margin: 0;
padding: 0;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 220px;
/*==等于左边栏宽度==*/
}

浮动和负边距实现

1
2
3
4
5
6
7
8
<div id="left">
Left Sidebar
</div>
<div id="content">
<div id="contentInner">
Main Content
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{
margin: 0;
padding: 0;
}
#left {
background-color: green;
float: left;
width: 220px;
margin-right: -100%;
}
#content {
float: left;
width: 100%;
}
#contentInner {
margin-left: 220px;/*==等于左边栏宽度值==*/
background-color: orange;
}

文章目录
  1. 1.
  2. 2.
    1. 2.1. Flex
    2. 2.2. 浮动布局
    3. 2.3. 浮动和负边距实现
  3. 3.
  4. 4.
|