CSS - 圣杯布局

实例展示

圣杯布局

小结

固定宽度与自适应布局的实现方法：

1. 方法一：利用BFC特性

父元素设置 overflow: hidden; 属性
固定宽度元素设置 margin-left left float position: relative;
自适应元素设置 float width: 100%;

        .bd-lft {
            zoom: 1;
            overflow: hidden;
            padding-left: 210px;
        }
        .bd-lft .aside {
            float: left;
            width: 200px;
            margin-left: -100%; /*= -100%*/
            position: relative;
            left: -210px; /* = -pararntNode.paddingLeft */
            _left: 0; /*IE6 hack*/
        }
        .bd-lft .main {
            float: left;
            width: 100%;
        }

2. 方法二：position 定位

父元素设置 position: relative
固定宽度元素设置 position: absolute; left: 0; top: 0

        .bd-lft {
            zoom: 1;
            padding-left: 210px;
            position: relative;
        }
        .bd-lft .aside {
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .bd-lft .main {
            width: 100%;
        }

源码

    
    
    
    



头部

    

        
主内容栏自适应宽度
    
    

        
侧边栏固定宽度
    


    

        
主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度主内容栏自适应宽度
    
    

        
侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度侧边栏固定宽度
    


    

        
主内容栏自适应宽度
    
    

        
侧边栏1固定宽度
    
    

        
侧边栏2固定宽度
    


    

        
主内容栏自适应宽度
    
    

        
侧边栏1固定宽度
    
    

        
侧边栏2固定宽度
    


    

        
主内容栏自适应宽度
    
    

        
侧边栏1固定宽度
    
    

        
侧边栏2固定宽度
    

底部