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

<body>

    <div id="sticker">

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

    </div>

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

</body>


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方式获得

<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';

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

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

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

  • 将wrapper容器 display:flex; flex-direction:column
  • sticker: flex:1; 占据除footer以外的剩余空间
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;

}


<header>我是头部</header>

<div id="wrapper">

    <div id="sticker">

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

    </div>

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

</div>


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

var h = document.body.clientHeight;

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

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. Linux中SSH服务基于key认证实践

    众所周知ssh是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议,它默认工作在tcp的22号端口,具体实现的软件有:openssh(centos默认安装的),dropbear.ssh协议目前 ...

  2. 理解Spark运行模式（三）(STANDALONE和Local)

    前两篇介绍了Spark的yarn client和yarn cluster模式,本篇继续介绍Spark的STANDALONE模式和Local模式. 下面具体还是用计算PI的程序来说明,examples中 ...

  3. nyoj 257 郁闷的C小加（一）(栈、队列)

    郁闷的C小加(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 我们熟悉的表达式如a+b.a+b*(c+d)等都属于中缀表达式.中缀表达式就是(对于双目运算符来说 ...

  4. 在C\C++中char 、short 、int各占多少个字节

    在C\C++中char .short .int各占多少个字节 : #include <bits/stdc++.h> using namespace std; int main() { co ...

  5. pat 1006 Sign In and Sign Out（25 分）

    1006 Sign In and Sign Out(25 分) At the beginning of every day, the first person who signs in the com ...

  6. bash:双引号和单引号

    单引号.双引号都能引用字符和字符串 单引号:'$i'仅仅是字符,没有变量的意思了 双以号:变量等能表示出来

  7. Centos上通过shell脚本备份数据库

    #!/bin/bash ds=`` list=`date +%Y`/`date +%m` dname="callme" eval "mkdir -p $list" ...

  8. node读取excel文件生成JSON

    当前的目录结构 excel的数据如下: node识别excel,先得安装  node-xlsx,用npm或yarn都可以 npm install  node-xlsx 或 yarn add node- ...

  9. Java多线程——多线程方法详解

    本系列文章是Java多线程的详解介绍,对多线程还不熟悉的同学可以先去看一下我的这篇博客Java基础系列3:多线程超详细总结,这篇博客从宏观层面介绍了多线程的整体概况,接下来的几篇文章是对多线程的深入剖 ...

  10. 纯css实现tab导航

    仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...