【学习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区域不能自动高度填充
相关文章：
【学习css1】flex布局-页面footer部分保持在网页底部
中间内容高度不够屏幕高度撑不开的页面时候，页面footer部分都能保持在网页页脚（最底部）的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…...
Java中创建线程的几种方式
底层都是基于实现Runnable接口 1.继承thread类，new一个thread对象，实现run方法，无返回值 public class MyThread extends Thread {Overridepublic void run() {System.out.println("Thread created by extending Thread class is runn…...
[A-04] ARMv8/ARMv9-Cache的相关策略
ver0.2 前言 前面我们已经通过三篇文章反反复复的讲Cache的概念、结构、架构，相信大家对Cache已经大概有了初步的了解。这里简单归纳一下: (1) Cache从硬件视角看，是连接PE-Core和主存的一种存储介质，存储的数据是主存中数据的副本…...
【笔试常见编程题06】最近公共祖先、求最大连续bit数、二进制插入、查找组成一个偶数最接近的两个素数
1. 最近公共祖先 将一棵无穷大满二叉树的结点按根结点一层一层地从左往右编号，根结点编号为1。现给定a，b为两个结点。设计一个算法，返回a、b最近的公共祖先的编号。注意其祖先也可能是结点本身。 测试样例： 2，3 返回&a…...
【工具分享】Gophish——网络钓鱼框架
文章目录 Gophish安装方式功能简介 Gophish Gophish 是一个开源的网络钓鱼框架，它被设计用于模拟真实世界的钓鱼攻击，以帮助企业和渗透测试人员测试和评估他们的网络钓鱼风险。Gophish 旨在使行业级的网络钓鱼培训对每个人都是可获取的，它易…...
“职业三大底层逻辑“是啥呢？
大家好，我是有用就扩散。 掌握职业发展的三大底层逻辑以宏观视角看待自己的职业发展道路具备长远规划自己职业路劲的能力通过成就事件呈现自己的工作成绩 一、痛点陈述 不喜欢眼前的工作？眼前的工作琐碎没前途？找不到能力提升的方向时候会…...
飞睿智能无线高速uwb安全数据传输模块，低功耗、抗干扰超宽带uwb芯片传输速度技术新突破
在信息化的时代，数据传输的速度和安全性无疑是每个企业和个人都极为关注的话题。随着科技的飞速发展，超宽带（Ultra-Wideband，简称UWB）技术凭借其性能和广泛的应用前景，逐渐成为了数据传输领域的新星。今天&…...
手把手教你从微信中取出聊天表情图片，以动态表情保存为gif为例
以下方法静态图片同样适用 收到动画表情像保存为gif 这时候我们就要借助微信官方的文件小助手网页版。 登录之后把要保存的表情转发给微信传输助手 这个时候就会出现将图像另存为 如果需要保存动图就修改后缀为.gif...
【深度学习】图形模型基础(5)：线性回归模型第三部分：线性回归模型拟合
1.引言 本博文专辑的焦点主要集中在回归模型的实用案例和工具上，从简单的单变量线性回归入手，逐步过渡到包含多个预测变量、非线性模型，以及在预测和因果推断中的应用。本文我们将介绍回归模型推断的一些数学结构，并提供一些代数…...
【Git 入门】初始化配置与新建仓库
文章目录 前言配置git新建仓库仓库的概念创建仓库命令总结前言 在现代软件开发中，版本控制系统已经成为了不可或缺的工具。其中，Git 是最为广泛使用的版本控制系统之一。Git 不仅可以帮助我们管理和跟踪代码的变化，还可以方便地与他人协作。本文将介绍 Git 的基础知识，包括…...
C语言 求两个整数的最大公约数和最小公倍数
写两个函数,分别求两个整数的最大公约数和最小公倍数,用主函数调用这两个函数,并输出结果。两个整数由键盘输入。 #include <stdio.h>// 求最大公约数 int gcd(int a, int b) {while (b ! 0) {int temp b;b a % b;a temp;}return a; }// 求最小公倍数 int lcm(int a,…...
Linux arm64平台指令替换函数 aarch64_insn_patch_text_nosync
文章目录 前言一、简介1.1 aarch64_insn_patch_text_nosync1.2 aarch64_insn_write1.3 patch_map1.4 set_fixmap_offset1.5 __set_fixmap 二、用途2.1 jump lable2.2 ftrace 参考资料 前言 这篇文章介绍了 Linux x86_64平台指令替换函数 text_poke_smp/bp 接下来介绍arm64平台…...
谷歌浏览器插件开发笔记0.1.033
谷歌浏览器插件开发笔记0.1.000 示例文件manifest.jsonpopup.htmloptions.jsoptions.htmlcontent.jsbackground.js 网页按钮快捷键插件api使用基础参考链接 示例文件 共计有6个常用的文件 manifest.json background字段：随着浏览器的打开而打开，随着浏…...
ETag：Springboot接口如何添加Tag
ETag简介 在Web开发中，ETag（Entity Tag）是一种HTTP头字段，用于标识特定版本的资源。ETag的主要用途是缓存控制和优化，通过比较客户端和服务器资源的ETag值，可以判断资源是否发生变化，从而避免不…...
JavaSe系列二十七: Java正则表达式
正则表达式 为什么要学习正则表达式再提几个问题解决之道-正则表达式正则表达式基本介绍介绍 正则表达式底层实现实例分析 正则表达式语法基本介绍元字符-转义号 \\\\元字符-字符匹配符元字符-选择匹配符元字符-限定符元字符-定位符分组非贪婪匹配 应用实例对字符串进行如下验证…...
（深度估计学习）Depth Anything V2 复现
Depth Anything V2 复现 一、配置环境二、准备数据1. 权重文件2. 训练数据 三、Test四、Train 代码：https://github.com/DepthAnything/Depth-Anything-V2 一、配置环境 在本机电脑win跑之后依旧爆显存，放到服务器跑：Ubuntu22.04，…...
C语言——printf、scanf、其他输入输出函数
printf函数 1.printf 函数的一般格式： printf 函数的一般格式为printf(格式控制,输出表列) 例如: printf("%d,%c\n",i,c); (1)“格式控制" 是用双撇号括起来的一个字符串，称“转换控制字符串”，简称“格式字符串”。它包括…...
adb 常用的命令总结
1、adb logcat 抓取日志 adb logcat > d:\log.txt Ctrlc 结束日志抓取 adb logcat -c > d:\log.txt 清空旧日志 发生Native Crash 时，抓取错误报告 adb logcat -b crash 抓取筛选后的日志： adb logcat -s AndroidRuntime > d:\log…...
Java发展过程中，JVM的演进
1. 初期的JVM（Java 1.0 到 Java 1.1） Java 1.0 于1996年发布，最初的JVM设计主要是为了跨平台兼容性和基本的垃圾回收功能。早期的JVM以解释执行字节码为主，性能相对较低。 2. 引入即时编译（JIT）ÿ…...
笔记：在Entity Framework Core中如何处理多线程操作DbContext
一、目的： 在使用Entity Framework Core (EF Core) 进行多线程操作时，需要特别注意，因为DbContext类并不是线程安全的。这意味着，你不能从多个线程同时使用同一个DbContext实例进行操作。尝试这样做可能会导致数据损坏、异常或不可…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...