sticker-footer

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

// html

<body>

    <div id="sticker">

        <div class="sticker-con">我是内容</div>

    </div>

    <div class="footer">我是脚</div>

</body>

// 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
    <body>

        <div id="wrapper">

            <div id="sticker">

                <div class="sticker-con">我是内容</div>

            </div>

            <div class="footer">我是脚</div>

        </div>

    </body>

    .wrapper{

        position:fixed;  // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了

        overflow:auto;   // 当高度超过 100% ;时产生滚动条

        width:100%;

        height:100%;     // 继承自 body

    }

    // wrapper 内部包裹的结构，就如上所示了，css样式也一样

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

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

    <body>

        <div id="sticker">

            <div class="sticker-con">我是内容</div>

        </div>

        <div class="footer">我是脚</div>

    </body>

    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以外的剩余空间
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>sticker footer</title>

</head>

<style>

    html,body{

        width: 100%;

        height: 100%;

        background-color: #ccc;

        margin:0;

        padding: 0;

    }

    header{

        height:44px;

        width: 100%;

        text-align: center;

        line-height: 44px;

    }

    #wrapper{

        display: flex;

        flex-direction: column;

        width: 100%;

        /*height: 100%;*/

    }

    #sticker{

        background-color: red;

        flex: 1;

    }

    #sticker .sticker-con{

        padding-bottom: 40px;

    }

    .footer{

        background-color: green;

        height: 40px;

    }

</style>

<body>

    <header>我是头部</header>

    <div id="wrapper">

        <div id="sticker">

            <div class="sticker-con">我是内容</div>

        </div>

        <div class="footer">我是脚</div>

    </div>

</body>

<script>

    var wrapper = document.querySelector('#wrapper');

    var h = document.body.clientHeight;

    wrapper.style.minHeight = h - 44 + 'px';   // 减去头部导航栏高度

</script>

</html>

sticker-footer 布局的更多相关文章

  1. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  2. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  3. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  4. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  5. 前端经典布局：Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  6. 底部粘连(stiky footer)布局

    前面的话 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内 ...

  7. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

  8. sticky footer布局，定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  9. stick footer布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  10. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

随机推荐

  1. Tableau学习Step4一数据解释、异常值监测、参数使用、分析结果如何对外发布

    Tableau学习Step4一数据解释.异常值监测.参数使用.分析结果如何对外发布 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau ...

  2. SpringBoot入门一：基础知识（环境搭建、注解说明、创建对象方法、注入方式、集成jsp/Thymeleaf、logback日志、全局热部署、文件上传/下载、拦截器、自动配置原理等）

    SpringBoot设计目的是用来简化Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,SpringBoot致力于在蓬勃发 ...

  3. Win10系统使用Gitblit搭建局域网Git服务器

    一.安装配置jdk 1.下载 下载地址:https://www.oracle.com/java/technologies/javase-jdk14-downloads.html 2.安装jdk 3.配 ...

  4. Laravel 8 图片上传七牛云

    1.利用 composer 下载依赖包 composer require itbdw/laravel-storage-qiniu 2.打开 config 文件夹下的 app.php 文件,在 prov ...

  5. tp5手机号验证码发送及验证

    原文链接:https://blog.csdn.net/weixin_43389208/article/details/119153323 为什么使用短信: 场景:通常在使用手机号注册时需要发送短信验证 ...

  6. windows下后台启动PHP,Nginx,Redis(使用RunHiddenConsole)

    启动命令(红色代码可选): 启动PHP RunHiddenConsole D:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php-cgi.exe -b 127.0 ...

  7. BSOJ6310题解

    互不相同,太困难啦!!!!!! 考虑可以相同的情况.可以容斥. \[ans=(1+1+1+1)-(2+1+1)+(3+1)+(2+2)-(4) \] 有点抽象,看看就好() \[ans=(a,b,c, ...

  8. BSOJ6387题解

    算是刷新了我对树上问题的认知 首先第一问随便做一个 \(O(nk)\) 的 DP 就可以草过去,考虑第二问. 我们将问题分为两个部分:走儿子边的答案和走父亲边的答案.最后拼接一下就好了. 设 \(fd ...

  9. 深度学习（一）之MNIST数据集分类

    任务目标 对MNIST手写数字数据集进行训练和评估,最终使得模型能够在测试集上达到\(98\%\)的正确率.(最终本文达到了\(99.36\%\)) 使用的库的版本: python:3.8.12 py ...

  10. vue3-动态组件的要点

    <!--动态组件--> <!--缓存,只缓存about和home组件--> <keep-alive exclude="about" > < ...