使用css弹性布局，让页面footer底部固定

在前端开发过的工作中，footer永远固定在底部的需求。也就是说一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的是使用css弹性布局解决如何使元素粘住浏览器底部。需求看下图：

首先这是HTML部分结构：

  <div class="layout"><header class="header">头部</header><main class="mian">内容</mian><footer class="footer">底部</footer></div>

然后看css部分：

.layout {display: flex;min-height: 100vh;flex-direction: column;
}
.header {height: 2rem;
}
.mian {width: 100%;flex: auto;background-color: yellow;
}
.footer {height: 2rem;background-color: red;
}

最终的结果：

这里面主要使用的是display:flex弹性布局，让父元素的最小高度为100vh，vh的是视口的单位，1vh等于视口高度的1%，100vh就等同于视口的高度。flex-direction: column;可以蒋子元素垂直显示，正如一个列一样。

然后在子元素内容部分main添加flex:auto;

flex: auto 等同于 flex: 1 1 auto，它根据元素的 width 或 height 属性调整元素的大小，但是其非常灵活，以便让它们吸收沿主轴的任何额外空间。

以上就是footer粘在页面底部的方法。

使用css弹性布局，让页面footer底部固定相关推荐

datagrid底部显示水平滚动_CSS flex 布局，头部和底部固定，中间出现滚动条
文章目录原理说明案例(原理说明) 案例二(回字形布局) 案例 (计算出中间组件的高度,剩下的百分百) 原理说明利用flex布局,很容易实现"左右两边固定,剩余100%"的布局 ...
css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局
#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子弹性盒子的属性全都是写在父元素上面 1.1基础解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
前端css弹性布局，响应式布局，多列布局
前端css弹性布局,响应式布局,多列布局主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
css弹性布局多个div居中多行锤子水平居中万能方案
css弹性布局多行锤子水平居中万能方案任何一个容器可以指定为flex布局,但是td和th等标签本身已有布局,所以重写display属性会使元素失去原有的布局特性 *{display:flex} ...
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用场景一 flex-direction 场景二 justify-content align-it ...
CSS弹性布局网格布局
一.Flexbox 弹性框布局模块,可更轻松设计灵活的响应式布局,而无需使用浮动或定位. 首先应给容器设置display 属性 <div class="flex-container&q ...

使用css弹性布局，让页面footer底部固定

使用css弹性布局，让页面footer底部固定相关推荐

最新文章

热门文章