摘要：嵌套层级不深，可直接继承自我是内容我是脚为本身高度为本身高度嵌套层级很深，无法直接从上级继承百分比高度的第一种方法给需要的创建一个我是内容我是脚这样就可以直接从继承百分比高度了当高度超过时产生滚动条继承自内部包裹的结构，就
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
我是头部
我是内容
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115573.html
摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。 前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...
摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。 前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...
摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。 前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...
阅读 2923·2021-11-23 09:51
阅读 3098·2021-11-15 11:39
阅读 2978·2021-11-09 09:47
阅读 2526·2019-08-30 13:49
阅读 2111·2019-08-30 13:09
阅读 3091·2019-08-29 16:10
阅读 3503·2019-08-26 17:04
阅读 982·2019-08-26 13:57
