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. 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  2. LeetCode-061-旋转链表

    旋转链表 题目描述:给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https://leet ...

  3. 实现同比、环比计算的N种姿势

    在做数据分析时,我们会经常听到同比.环比同比的概念.各个企业和组织在发布统计数据时,通常喜欢用同比.环比来和之前的历史数据进行比较,用来说明数据的变化情况.例如,统计局公布2022年1月份CPI同比增 ...

  4. 《Shader入门精要》中MVP变换的Projection矩阵与《GAMES101图形学入门》中的区别

    game101的透视投影的投影矩阵是这样的 正交投影是这样的 而shader入门精要的透视投影矩阵是这样子 正交投影矩阵是这样子 game101的透视投影是这样得到的 而正交投影的时候并没有假设中心点 ...

  5. Flink域名处理

    概述 最近做了一个小任务,要使用Flink处理域名数据,在4GB的域名文档中求出每个域名的顶级域名,最后输出每个顶级域名下的前10个子级域名.一个比较简单的入门级Flink应用,代码很容易写,主要用到 ...

  6. 如何解决代码中if/else 过多的问题

    前言 if...else 是所有高级编程语言都有的必备功能.但现实中的代码往往存在着过多的 if...else.虽然 if...else 是必须的,但滥用 if...else 会对代码的可读性.可维护 ...

  7. 使用dom4j处理xml文件

    1.项目中加入dom4j的jar 2.基本的读取xml文件为Document对象:将Document对象写入到指定文件中 package com.ricoh.rapp.deploymenttool.u ...

  8. Python knife 一款伪菜刀

    Python knife ​ 一款伪菜刀. ​ 设计之初,本想只写个命令行的就可以了,但又想与众不同,想用python写代码,又不想用c#写前端(c#太卡了),万分无奈之下,找到一个替代品,Pyqt, ...

  9. 常用的jdbc的Druid连接池配置

    spring: datasource: username: root password: 888888 url: jdbc:mysql://localhost:3306/mybatis driver- ...

  10. Chroot 特性 ?

    3.2.0 版本后,添加了 Chroot 特性,该特性允许每个客户端为自己设置一个命名 空间.如果一个客户端设置了 Chroot,那么该客户端对服务器的任何操作,都将 会被限制在其自己的命名空间下. ...