css整体缩放布局

来源：互联网发布：bl网络剧编辑：程序博客网时间：2024/04/30 22:55
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>1-2-1整体缩放布局</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">*{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;}</style></head><body><div id="all"><div id="header">头部</div><div id="container" class="clearfix"><div id="content">中部内容</div><div id="side">中部侧边</div></div><div id="pagefooter">我是底部</div></div></body></html>
0 0