div{border:1px solid #CCC;}
.wrapper{

width:100%;

height:100%;

display:flex;

flex-flow: column; }
.content{flex:1}
.footer{flex:0}

<div class="wrapper">
　　<div class="content">
<p>coontent</p>
<p>coontent</p>
<p>coontent</p>
<p>coontent</p>
<p>coontent</p>
<p>coontent</p>
<p>coontent</p>

</div>
　　<div class="footer">footer</div>
</div>

stacky footer的更多相关文章

  1. 一个将 footer 保持在底部的最好方法

    原文: Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时,有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少,无法将内容区域 ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  4. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  5. 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

    引言   在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...

  6. footer置底

    html代码: <div class="container"> <div cass="header"></div> < ...

  7. jquery mobile开发中footer一直在底部的设置方法

    现给出html中Body节点中的代码如下: 实现代码:data-position=”fixed” <div data-role="page" id="pageone ...

  8. ListView中动态显示和隐藏Header&Footer

    ListView的模板写法 ListView模板写法的完整代码: android代码优化----ListView中自定义adapter的封装(ListView的模板写法) 以后每写一个ListView ...

  9. 2015.4.19 为什么footer下a的索引值那么大

    1.问题demo:为什么footer下a的索引值那么大,index不是查找兄弟级别的元素么?而且还限定了范围在footer下的a的情况下. 解决方法:alert( $("#footer a& ...

随机推荐

  1. WIN10X64LTSC2019中度精简版by双心

    WIN10X64LTSC2019中度精简版by双心https://www.cnblogs.com/liuzhaoyzz/p/11295032.html 一.前言:关于LTSC中度精简版的说明 一个MM ...

  2. CSharpGL(54)用基于图像的光照(IBL)来计算PBR的Specular部分

    CSharpGL(54)用基于图像的光照(IBL)来计算PBR的Specular部分 接下来本系列将通过翻译(https://learnopengl.com)这个网站上关于PBR的内容来学习PBR(P ...

  3. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  4. kindEditor 修改上传图片的路径

    压缩过的js类似

  5. 【STM32H7教程】第27章 STM32H7的TCM，SRAM等五块内存的动态内存分配实现

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第27章       STM32H7的TCM,SRAM等五块内 ...

  6. Ansible-Tower自动化运维管理环境 - 安装破解记录

    公司中实现运维自动化的架构中主要用到ansible,ansible脚本在部署服务器指令行中显得不太直观.Ansible-Tower(之前叫做awx)是将ansible的指令界面化,简明直观,简单易用. ...

  7. Sql ----- sqlserver 中的if 判断 case... when

    与查询放到一块使用: 语法: select case when 范围条件 then 产生的结果 when 范围条件 then 产生的结果 else 不是以上范围产生的结果 end from 表名 个人 ...

  8. vue发送ajx请求 axios

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  9. c# 字符串中全角和半角字符互转

    public class ConvertDBCAndSBC { /// <summary>半角转成全角 /// 半角空格32,全角空格12288 /// 其他字符半角33~126,其他字符 ...

  10. Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之四 || Swagger的使用 3.2

    本文梯子 本文3.0版本文章 前言 一.swagger的一般用法 0.设置swagger页面为首页——开发环境 1.设置默认直接首页访问 —— 生产环境 2.为接口添加注释 3.对 Model 也添加 ...