【学习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实例进行操作。尝试这样做可能会导致数据损坏、异常或不可…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...