【学习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实例进行操作。尝试这样做可能会导致数据损坏、异常或不可…...
如何快速突破百度网盘限速：高效下载工具终极指南
如何快速突破百度网盘限速：高效下载工具终极指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 百度网盘作为国内最流行的云存储平台，其下载速度限制一…...
CANN/pypto量化矩阵乘法
pypto.scaled_mm 【免费下载链接】pypto PyPTO（发音: pai p-t-o）：Parallel Tensor/Tile Operation编程范式。 项目地址: https://gitcode.com/cann/pypto 产品支持情况 产品是否支持Ascend 950PR/Ascend 950DT√ 功能说明 实现mat_…...
2026最权威一键生成论文工具榜单：这些被高校和导师偷偷推荐的软件你用了吗
一键生成论文工具正在重塑学术写作的效率与质量。随着AI技术的不断突破，越来越多高校、导师及科研机构开始关注并推荐这些高效、合规的智能写作助手。依托权威检测平台数据、多所高校实测反馈及用户真实评价，本文将为您揭晓2026年最值得信赖的一键生成论…...
深入拆解 MySQL InnoDB 隔离级别：从 MVCC 到临键锁
前言 关于 MySQL InnoDB 的事务隔离级别，90% 的开发者都存在至少一个致命误区： 误区1：RR（可重复读） 临键锁 彻底解决了幻读误区2：Serializable 只是比 RR 加的锁更多，本质还是用 MVCC误区3&a…...
Heavy Fighter动画包：Unity战斗系统根运动与状态机深度解析
1. 这套动画包不是“拿来就能用”的资源，而是需要你亲手校准的战斗系统骨架我在2021年接手一个横版ARPG项目时，美术总监甩给我三套Mecanim动画包，其中一套就是Heavy Fighter Mecanim Animation Pack。当时我第一反应是“终于不用手调IK了”&a…...
独立站 AI 智能推荐商品功能落地实操：从 0 到 1 提升转化与客单价
在独立站运营中，流量成本持续走高，很多站点陷入 “有流量、没转化、客单价低” 的困境。2026 年跨境电商数据显示，部署 AI 智能推荐的独立站，平均转化率提升 4.7%-15%，客单价上涨 20%-30%，复购率提高 18% 以…...
ViMax 为什么会冲上 GitHub Trending：AI 视频生成开始从“出片”转向“制片”
今天刷 GitHub Trending 时，ViMax 这项目很难不注意到。它挂着 674 stars today 的当日热度，标题写得也很直接：Agentic Video Generation，导演、编剧、制片、视频生成一体化。真正让我觉得它值得写，不只是因为它又是一…...
手写一个AI代码审查员：Claude Agent SDK + MCP 深度实战
引言2026年5月，Anthropic做了一件意味深长的事：把 Claude Code SDK 改名为 Claude Agent SDK。改名背后是一个判断——这不再是"帮你写代码的工具"，而是一个能自主读代码、分析逻辑、修改文件、跑测试、甚至提PR的AI Agent编排框架…...
Stable Diffusion 实战教程：从安装到图像生成
Stable Diffusion 实战教程：从安装到图像生成 前言 Stable Diffusion 是当前最流行的开源图像生成模型之一。它能够根据文字描述生成高质量的图像，在创意设计、游戏开发等领域有广泛应用。 我在多个项目中使用过 Stable Diffusion，从简单的图…...
3步让PS手柄在Windows上完美运行：DS4Windows终极配置指南
3步让PS手柄在Windows上完美运行：DS4Windows终极配置指南 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 你是否曾为心爱的PlayStation手柄在Windows电脑上无法被游戏识别而烦…...