sticker-footer 布局

187J3X1 发布于2019-08-30 13:49 / 2434人阅读

摘要：嵌套层级不深，可直接继承自我是内容我是脚为本身高度为本身高度嵌套层级很深，无法直接从上级继承百分比高度的第一种方法给需要的创建一个我是内容我是脚这样就可以直接从继承百分比高度了当高度超过时产生滚动条继承自内部包裹的结构，就

sticker-footer 1、嵌套层级不深，可直接继承自 body width：100%； height:100%;

// html

    
        我是内容
    
    我是脚


// css
html,body{
    width:100%;
    height:100%;
}
#sticker{
    width:100%;
    min-height:100%;
}
.sticker-con{
    padding-bottom:40px;    // 40px 为 footer 本身高度
}
.footer{
    margin-top:-40px;  // 40px 为 footer 本身高度
}

2、嵌套层级很深，无法直接从上级继承百分比高度的

第一种方法：给需要的 sticker-footer 创建一个 wrapper

    
        
            
                我是内容
            
            我是脚
        
    

    .wrapper{
        position:fixed;  // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了
        overflow:auto;   // 当高度超过 100% ;时产生滚动条
        width:100%;
        height:100%;     // 继承自 body
    }
    // wrapper 内部包裹的结构，就如上所示了，css样式也一样

3. 当无法用百分比获取高度时，也可通过js方式获得

    //css样式同第一种， 只是 sticker 的 min-height 用css获取

    
        
            我是内容
        
        我是脚
    


    var sticker = document.querySelector("#sticker");
    var h = document.body.clientHeight;
    sticker.style.minHeight = h - 44 + "px";

    //这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height:

4. 强大的 flex 布局 flex-direction:column

将wrapper容器 display:flex; flex-direction:column

sticker: flex:1; 占据除footer以外的剩余空间




    
    
    sticker footer

    


    我是头部
    
        
            我是内容
        
        我是脚

私有云云服务器 div布局布局html 排版布局拖动布局帧布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115573.html

sticker-footer 布局

摘要：嵌套层级不深，可直接继承自我是内容我是脚为本身高度为本身高度嵌套层级很深，无法直接从上级继承百分比高度的第一种方法给需要的创建一个我是内容我是脚这样就可以直接从继承百分比高度了当高度超过时产生滚动条继承自内部包裹的结构，就 sticker-footer 1、嵌套层级不深，可直接继承自 body width：100%； height:100%; // html ...

ruicbAndroid 2019-08-05 17:56 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

fai1017 2019-08-05 15:23 评论0 收藏0