html 整体缩小zoom,css整体缩放布局

1-2-1整体缩放布局

*{

margin: 0;

padding: 0;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

html {

min-height: 100%;

_height:100%;

height:100%;

}

body {

min-height: 100%;

_height:100%;

height:100%;

/*background: #ff0000;*/

}

#all {

background: #EEE;

border-left: 1px solid #ff0000;

border-right: 1px solid #ff0000;

padding: 0 20px 0 20px;

margin: auto;

font: 1.5em arial, verdana, sans-serif;

width: 85%;

min-height: 100%;

_height:100%;

}

#header,#pagefooter,#container {

margin: 0 auto;

width: 85%;

border: 1px solid #000000;

}

#content {

float: right;

width: 66%;

border: 1px solid green;

}

#side {

float: left;

width: 33%;

border: 1px solid blue;

}

.clearfix::before {

content: "";

display: table;

width: 0;

height: 0;

overflow: hidden;

}

.clearfix::after {

content: "";

clear: both;

display: table;

width: 0;

height: 0;

overflow: hidden;

}

.clearfix {

zoom: 1;

}

头部

中部内容

中部侧边

我是底部