css布局——顶栏+左侧栏+主体

先看图,红色主体内容自适应大小,顶栏侧边栏延伸。

如果仅靠三个div和css定位去实现真的是很麻烦,还会出现各种问题。

网页最开始应用的时候就是以表格辅助定位,但现在各种特效使得表格定位不能适应,但这种基础框架还是可以用,很方便。

html



    
    Title
    


顶部栏
侧边栏

就是这样的格子,2x2一共4个格子,然后第一行格子合并单元格,ok,因为html里,表格整体固定大小,某个格子也设定大小,其他格子会填充。

顶部栏
侧边栏 主体

css

html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#toptool{
    background-color: #35864a;
    height: 100%;
    width: 100%;
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.2);
}

#lefttool{
    width: 100%;
    height: 100%;
    background-color: #40d5b3;
}
#content{
    width: 100%;
    height: 100%;
    background-color: #c72d2d;

}

表格内部的边距取消方法:

 

 

你可能感兴趣的:(css,css,定位)