css小技巧

浏览数：49 / 时间：2015年06月09日

 布局中自适应高度和宽度

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;
}

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log si ad ai la css height class style log si ad ai la css height

相关文章

随机文章

您可能还喜欢

您可能还喜欢