【学习css1】flex布局-页面footer部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候,页面footer部分都能保持在网页页脚(最底部)的方法

1、首先上图看显示效果

2、奉上源码

2.1、html部分

<body><header>头部</header><main>主区域</main><footer>底部</footer>
</body>

2.2、css部分

<style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: flex;flex-direction: column;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {margin-top: auto;background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {align-self: center;/* 或者使用如下也可实现main区域居中显示 *//* margin: 0 auto; */background: aqua;width: 80%;}</style>

3、全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flexbox布局</title><style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: flex;flex-direction: column;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {margin-top: auto;background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {align-self: center;background: aqua;width: 80%;}</style>
</head>
<body><header>头部</header><main>主区域</main><footer>底部</footer>
</body>
</html>

 4、原理

1、首先,我们确保 body 元素至少会拉伸到屏幕的整个高度 min-height: 100vh 。如果内容较短(某些移动浏览器除外),这不会触发溢出,并且它将允许内容根据需要继续拉伸高度。

2、设置 flex-direction: column 在保留堆叠块元素方面保持正常文档流的行为(假设所有 body 块元素的直接子元素确实都是块元素)。

3、flexbox 的优势在于利用该 margin: auto 行为。这个奇怪的伎俩将导致边距填充它所设置的项目与其在相应方向上最近的兄弟姐妹之间的任何空间。设置 margin-top: auto 会有效地将页脚推到屏幕底部。 

5、缺陷

main区域不能自动高度填充 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/376039.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

循环结构(一)——for语句【互三互三】

文章目录 &#x1f341; 引言 &#x1f341; 一、语句格式 &#x1f341; 二、语句执行过程 &#x1f341; 三、语句格式举例 &#x1f341;四、例题 &#x1f449;【例1】 &#x1f680;示例代码: &#x1f449;【例2】 【方法1】 &#x1f680;示例代码: 【方法2】…

通过git将文件push到github 远程仓库

1.先git clone 代码地址 git clone htttp://github.com/用户名/test.git 2. 添加文件 例如&#xff1a;touch 1.txt 3.将文件添加到暂存区 git add 1.txt 4.提交 git commit -m "commit 1.txt" 5.与远程仓库建立关联 git remote add 远程仓库名 远程仓库…

华为浏览器,Chrome的平替,插件无缝连接

文章目录 背景插件书签 背景 不知道各位小伙伴有没有这样的痛点&#xff0c;办公电脑、家里的电脑还有手机、平板等&#xff0c;收藏了一个网址或者在手机上浏览了某个网页&#xff0c;保存起来&#xff0c;可是一换平台或者换个电脑&#xff0c;在想要浏览之前收藏的东西&…

Elasticsearch 8 支持别名查询

在 Elasticsearch 8 中&#xff0c;使用 Java 高级 REST 客户端进行别名管理的过程与之前的版本类似&#xff0c;但有一些API细节上的变化。以下是如何使用 Java 和 Elasticsearch 8 进行别名操作的例子&#xff1a; 引入依赖 确保你的项目中包含了 Elasticsearch 的高级 RES…

iPad锁屏密码忘记怎么办?有什么方法可以解锁?

当我们在日常使用iPad时&#xff0c;偶尔可能会遇到忘记锁屏密码的尴尬情况。这时&#xff0c;不必过于担心&#xff0c;因为有多种方法可以帮助您解锁iPad。接下来&#xff0c;小编将为您详细介绍这些解决方案。 一、使用iCloud的“查找我的iPhone”功能 如果你曾经启用了“查…

亚马逊IP关联是什么?要怎么解决呢?

亚马逊不仅提供了广泛的商品和服务&#xff0c;也是许多企业和个人选择的电子商务平台。然而&#xff0c;与亚马逊相关的IP关联问题&#xff0c;特别是在网络安全和运营管理方面&#xff0c;经常成为使用亚马逊服务的用户和商家关注的焦点。通过了解亚马逊IP关联的含义、可能的…

数学建模国赛入门指南

文章目录 认识数学建模及国赛认识数学建模什么是数学建模&#xff1f;数学建模比赛 国赛参赛规则、评奖原则如何评省、国奖评奖规则如何才能获奖 国赛赛题分类及选题技巧国赛赛题特点赛题分类 国赛历年题型及优秀论文 数学建模分工技巧数模必备软件数模资料文献数据收集资料收集…

单点登录(SSO)机制

1、定义 单点登录&#xff08;Single Sign On&#xff09;&#xff0c;简称为 SSO&#xff0c;SSO的定义是指用户只需要登录一次就可以访问所有相互信任的应用系统。 eg:淘宝、天猫都属于阿里旗下&#xff0c;当用户登录淘宝后&#xff0c;再打开天猫&#xff0c;系统便自动帮…

从“Hello,World”谈起(C++入门)

前言 c的发展史及c能干什么不能干什么不是我们今天的重点&#xff0c;不在这里展开&#xff0c;有兴趣的朋友可以自行查阅相关资料。今天我们主要是围绕c的入门程序&#xff0c;写一个“hello&#xff0c;world”&#xff0c;并且围绕这个入门程序简单介绍一下c和c的一些语法&…

【fastadmin 开发实战】select 级联选择

先看实现的效果 1、表单页面实现级联选择 2、级联选项后台可以编辑添加 前端代码&#xff08;编辑窗口&#xff09;&#xff1a; <div class"form-group"><label class"control-label col-xs-12 col-sm-2">{:__(渠道归属)}:</label><…

STM32HAL库+ESP8266+cJSON+微信小程序_连接华为云物联网平台

STM32HAL库ESP8266cJSON微信小程序_连接华为云物联网平台 实验使用资源&#xff1a;正点原子F407 USART1&#xff1a;PA9P、A10&#xff08;串口打印调试&#xff09; USART3&#xff1a;PB10、PB11&#xff08;WiFi模块&#xff09; DHT11&#xff1a;PG9&#xff08;采集数据…

推荐3款良心效率软件,妥妥的神器,绝对不可错过

Wise JetSearch Wise JetSearch 是一款免费且功能强大的文件搜索工具&#xff0c;支持在本地硬盘和可移动磁盘上快速查找文件和文件夹。该软件特别适用于FAT32、NTFS以及exFAT格式的硬盘。 Wise JetSearch 使用索引技术&#xff0c;可以在极短的时间内完成大规模文件的搜索任务…

Hadoop3:HDFS-通过配置黑白名单对集群进行扩缩容,并实现数据均衡(实用)

一、集群情况介绍 我的本地虚拟机&#xff0c;一共有三个节点&#xff0c;hadoop102、hadoop103、hadoop104 二、白名单 创建白名单文件whitelist&#xff0c;通过白名单的配置&#xff0c;只允许集群包含102和103两台机器可以存储数据&#xff0c;104无法存储数据。 需求 …

怎样将aac转换mp3格式?推荐四个aac转MP3的方法

怎样将aac转换mp3格式&#xff1f;当需要将aac格式音频转换为MP3格式时&#xff0c;有几种方法可以轻松实现这一目标。MP3是一种广泛支持的音频格式&#xff0c;几乎所有设备和平台都能播放MP3文件&#xff0c;包括各种音乐播放器、手机、平板电脑和汽车音响系统。而且它也提供…

【C++】入门基础(命名空间、缺省参数、函数重载)

目录 一.命名空间&#xff1a;namespace 1.namespace的价值 2.namespace的定义 3.namespace的使用方法 3.1 域解析运算符:: 3.2 using展开 3.3 using域解析运算符 二.输入输出 三.缺省参数 四.函数重载 1.参数类型不同 2.参数个数不同 3.参数顺序不同 一.命名空间&…

分析逆向案例十七——深圳大学登录逆向(新类型,有些加密参数是通过页面源代码获取的,不同于前面有发包)

网址&#xff1a;aHR0cDovL25ld2F1dGhzZXJ2ZXIuc3p1LmVkdS5jbi9hdXRoc2VydmVyL2xvZ2lu 登陆页面&#xff0c;找到登录接口&#xff0c;发现登录接口是document类型&#xff0c;而不是xhr类型&#xff0c;无法跟栈分析。 登陆两次&#xff0c;发现有两个加密参数&#xff0c;lt…

君方智能设计平台-夹点交互编辑架设计与实现

1.背景介绍 在图形平台开发中&#xff0c;实现强大的图形编辑功能对于用户体验至关重要。夹点&#xff08;Grips&#xff09;编辑是其中的一个关键部分&#xff0c;它不仅简化了用户与图形对象的交互&#xff0c;还提供了多种功能&#xff0c;从简单的移动和缩放到复杂的旋转和…

JS爬虫实战之极验四代

极验四代滑块验证码 一、目标网站说明二、流程步骤1. 逆向步骤一般分为&#xff1a;2. 接口确认1- 确认流程2- 获取verify的参数3- 构建requests验证verify的参数4- 锁定secode参数的作用 ok&#xff0c;让我们去获取verify接口中的响应&#xff01;&#xff01;&#xff01; 3…

风光摄影:相机设置和镜头选择

写在前面 博文内容为《斯科特凯尔比的风光摄影手册》读书笔记整理涉及在风景拍摄中一些相机设置&#xff0c;镜头选择的建议对小白来讲很实用&#xff0c;避免拍摄一些过曝或者过暗的风景照片理解不足小伙伴帮忙指正 &#x1f603;,生活加油 99%的焦虑都来自于虚度时间和没有好…

240712_昇思学习打卡-Day24-LSTM+CRF序列标注(3)

240712_昇思学习打卡-Day24-LSTMCRF序列标注&#xff08;3&#xff09; 今天做LSTMCRF序列标注第三部分&#xff0c;同样&#xff0c;仅作简单记录及注释&#xff0c;最近确实太忙了。 Viterbi算法 在完成前向训练部分后&#xff0c;需要实现解码部分。这里我们选择适合求解…