首页 > 代码库 > 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小技巧
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。