前端经典布局:Sticky footer 布局-----flex布局方式

html代码:

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

body {

display: flex; 
flex-flow: column; 
min-height: 100vh;

} .content {

flex: 1; 

} .footer{

flex: 0;      

} 这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0,这样footer获得其固有的高度;content的flex设为1,这样它会充满除去footer的其他部分。

参考文章:https://segmentfault.com/a/1190000015123189

原文链接:segmentfault.com

上一篇:阿里云部署 5.域名、DNS、nginx
下一篇:基于SEER的区块链版赛亚麻将游戏Pre alpha版本内测啦!

相关推荐

  • 高度等于动态宽度(CSS流体布局)[复制品]

    webtikiThomas Norman(https://stackoverflow.com/users/1811992/webtiki)提出了一个问题:Height equal to dynamic...

    2 年前
  • 高度灵活可定制的PC布局:头部按钮、左边栏、右边栏、状态栏

    什么是自适应布局 CabloyJS提供了一套布局管理器,实现自适应布局 关于自适应布局的概念,强烈建议先阅读以下两篇文章: 自适应布局:pc = mobile pad 自适应布局:视图尺寸 什么...

    1 个月前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    2 个月前
  • 重温 Flex 布局

    介绍 这是关于 Flex 布局的实践,原想还水一点字数来介绍 Flex 相关属性,想想还是算了,阮一峰大佬的两篇文章推上: 1. Flex 布局教程:语法篇(http://www.ruanyi...

    1 年前
  • 重新学习 flex-grow、flex-shrink、flex-basis

    本文要点: flex 布局中,flex 设置单、双、三值的时候分别有什么意义。 flex 布局怎么压缩负空间(flexshrink) flex 布局怎么分配多余的空间(flexgrow) flexb...

    1 个月前
  • 采用20/80原则学习 CSS Grid 布局

    采用20 / 80原则学习和使用 Grid 布局。 介绍 本文不会覆盖Grid 布局的所有细节,而是面向那些想快速用起来并看到效果的你们。我将会向你介绍 Grid 技术的20%,学会了这些你就掌...

    2 年前
  • 谈一谈flex布局使用中碰到的一些问题

    起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下。 flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹...

    2 年前
  • 说说vue-cli中使用flexible和px2rem-loader

    1.下载libflexible 2.在项目中引入libflexible 一般情况在(main.js中引入libflexible) 3.设置meta标签(视情况而定) 4.安装px2r...

    1 年前
  • 详解CSS的Flex布局

    本文由云社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式。通过Flex布局,可以很优雅地解决很多CSS布局的问题。

    1 年前
  • 让多个元素贴边平分布局

    怎样让多个元素贴边平分?         为什么会有这个疑问呢?首先说明一下,接触前端有一年的时间了,自认为对静态布局不在话下,果然,自负的人最容易被打脸呐,刚换了一份工作,公司对前端要求比较严格...

    2 年前

官方社区

扫码加入 JavaScript 社区