html div横向占满,html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）...

div布局：

上

上_底

中左

中右

中间

下

样式：

body, html {

margin: 0px;

}

#header {

background: blue;

height: 100px;

width: 100%;

position:relative; /*父div的位置设置成相对的*/

}

#h_menu {

width:100%;

height:50px;

background:yellow;

/*而子div的位置设置成绝对的，并且下边缘设为0*/

position:absolute;

bottom:0;

}

.left {

width: 15%;    /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/

height: 200px;

background: red;

float: left;

}

.right {

width: 15%;  /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/

height: 200px;

background: pink;

float: right;

}

.center {

height: 200px;

background: green;

/*两种方式均可(一)margin(二)margin-left、margin-right*/

/*(一)、用这种方式上面的left和right中的width是百分比或者像素值都可以*/

margin: auto;

/*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/

/*margin-left:15%;

margin-right:15%;*/

}

#footer {

background: blue;

height: 100px;

width: 100%;

}

效果图如下：

另一种实现方式(高度也占满全屏)

body, html {

margin: 0px;

}

#header {

background: blue;

height: 100px;

width: 100%;

position: relative; /*父div的位置设置成相对的*/

top: 0;

}

#header #h_menu {

position:absolute;

bottom:0;

background:yellow;

width:100%;

height:50px;

}

#middle {

position:absolute;

width:100%;

height:auto;

top: 100px;

bottom:50px;

}

.left {

width: 15%;    /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/

background: red;

float: left;

height:100%;

}

.right {

width: 15%;  /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/

height: 100%;

background: pink;

float: right;

}

.center {

height: 100%;

background: green;

/*两种方式均可(一)margin(二)margin-left、margin-right*/

/*(一)、用这种方式上面的left和right中的width是百分比或者像素值都可以*/

margin: auto;

/*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/

/*margin-left:15%;

margin-right:15%;*/

}

#footer {

background: blue;

height: 50px;

width: 100%;

position: absolute;

bottom: 0;

}

上

上_底

中左

中右

中间

下

截图如下：