html中div自适应代码,CSS+DIV自适应布局

CSS+DIV自适应布局

1.两列布局(左右两侧，左侧固定宽度200px;右侧自适应占满)

代码如下：

左右两侧，左侧固定宽度200px;右侧自适应占满

.box{

width:800px;

height:300px;

margin:0 auto;

}

.left{

width:200px;

height:300px;

background:#f00;

float:left;

}

.right{

height:300px;

margin-left:200px;

background:#0f0;

}

运行结果如下图：

两栏布局(左定宽，右自动)

float + margin

2.三列布局(左中右三列，左右200px固定，中间自适应占满)

方法一(左右浮动，中间 margin-left,margin-right，中间div在最后)

代码如下

左中右三列，左右200px固定，中间自适应占满 方法一

.box{

width:800px;

height:300px;

margin:0 auto;

}

.left{

width:200px;

height:300px;

background:#f00;

float:left;

}

.right{

width:200px;

height:300px;

float:right;

background:#0f0;

}

.center{

height:300px;

background-color:#00f;

margin:0 200px;

}

运行结果如下图

方法二(左中右定位)：

代码如下

左中右三列，左右200px固定，中间自适应占满 方法二

.box{

width:1000px;

height:300px;

margin:0 auto;

position:relative;

}

.left{

width:200px;

height:300px;

background:#f00;

position:absolute;

top:0px;

left:0px;

}

.right{

width:200px;

height:300px;

background:#0f0;

position:absolute;

top:0px;

right:0px;

}

.center{

height:300px;

background-color:#00f;

position:absolute;

left:200px;

right:200px;

}

运行结果如下图：

3.上中下三行，头部，底部固定高200px，中间自适应占满

中间定位，底部定位

代码如下：

上中下三行，头部，底部固定高200px，中间自适应占满

*{

margin:0;

}

html{

height:100%;

}

body{

min-height:100%;

}

.header{

width:100%;

height:100px;

background-color:#ccc;

}

.main{

width:100%;

background-color:#f00;

position:absolute;

top:100px;

bottom:100px;

}

.footer{

height:100px;

width:100%;

position:absolute;

bottom:0px;

background-color:#ccc;

}

运行代码如下图：

4.上下两部分，地下这个股东高度200px,如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer往下挤

代码如下：

上下两部分，地下这个股东高度200px,如果上面的内容少，

那么这个footer就固定在底部，如果内容多，就把footer往下挤

*{

margin:0;

}

html{

height:100%;

}

body{

min-height:100%;

background-color:#00f;

position:relative;

}

.header{

height:100%;

background-color:#00f;

padding-bottom:200px;

}

.footer{

width:100%;

height:200px;

position:absolute;

bottom:0px;

background-color:#0ff;

}

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

sdsadas

运行结果如下图：

新手入门，请多多关照