首页 > 代码库 > css小技巧

css小技巧

 布局中自适应高度和宽度

body {    margin-top:0px;    /* 去除网页上边空白 */}/* 大容器,包含下面所有层 */#container {    width:800px;    margin:0px auto;    /* 居中 */}/* 头部 */#header {    width:100%;    height:100px;    background:#FFE1FF;}/* 中部,包括左边区(sider)和右边内容区(content) */#middleBody {    width:100%;    overflow:hidden;    /* 隐藏超出的部分 */}/* 左边 */#sider {    width:200px;    float:left;    background:#FFE4E1;}/* 右边主内容区 */#content {    /* 此两行是#content自适应宽度的关键,旨在与右边界对齐,且不被挤到下面去 */    padding-right:10000px;    margin-right:-10000px;    float:left;    background:#FFFAF0;}/* #sider和#content共同属性,此为自适应高度的关键,旨在#sider和#content下边界对齐,且不会露白*/.column {    padding-bottom:20000px;    margin-bottom:-20000px;}/* 底部 */#footer{    clear:left;    /* 防止float:left对footer的影响 */    width:100%;    height:80px;    background:#FFE4B5;}

 

css小技巧