【学习css2】grid布局-页面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: grid;grid-template-rows: auto 1fr auto;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {margin: 0 auto;background: aqua;width: 80%;}</style>3、全部代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>gridbox布局</title><style>html, body {margin: 0;padding: 0;width: 100%;height: 100%;}body {min-height: 100vh;display: grid;grid-template-rows: auto 1fr auto;}header {background: aquamarine;height: 40px;line-height: 40px;text-align: center;}footer {background: aquamarine;height: 50px;line-height: 50px;text-align: center;}main {margin: 0 auto;background: aqua;width: 80%;}</style>
</head>
<body><header>头部</header><main>主区域</main><footer>底部</footer>
</body>
</html>
4、原理
1、保留了
min-height: 100vh这个方法，但随后我们使用grid-template-rows来间隔。2、这种方法的技巧是使用特殊的网格单元
fr。fr表示“份数”，使用它要求浏览器计算剩余空间的可用“份数”，以分配给该列或该行。在这种情况下，它填充了页眉和页脚之间的所有可用空间，这也解决了 flexbox 方法的“缺陷”，main区域不能自动填充。
相关文章：
【学习css2】grid布局-页面footer部分保持在网页底部
中间内容高度不够屏幕高度撑不开的页面时候，页面footer部分都能保持在网页页脚（最底部）的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…...
Django 表单
Django 表单 Django 表单是 Web 开发中不可或缺的一部分，它允许用户与网站进行交互，如提交数据、上传文件等。在 Django 框架中，表单功能非常强大，支持各种自定义和验证，使得开发者能够轻松地处理用户输入。本文将详细介绍 Django 表单的使用方法，包括创建表单、表单字段…...
【Linux网络】网络基础
本篇博客整理了 Linux 网络编程的前置知识，例如网络的发展、协议和协议栈分层、网络通信原理、网络地址等，为后续进入 Linux 网络编程作铺垫。 目录 一、网络发展 二、网络协议 1）协议的作用 2）协议栈 3）协议分层…...
Open3D 可视化点云配准中匹配点之间的连线
目录 一、概述 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2处理后的点云 一、概述 在点云配准的过程中，可视化匹配点之间的连线（匹配线）有助于更直观地理解配准结果和误差分布。以下是可视化匹配点之间连线的好处和作用： 1. 直观理…...
Linux编程第三篇：Linux简介，开源软件简介（Linux是否安全？参考TESEC指标）
业精于勤荒于嬉，行成于思毁于随。 今天这篇算是Linux的正式学习，废话不多说，我们开始吧 第三篇 一、UNIX与Linux发展史1.1、UNIX发展历史和发行版本1.2、UNIX主要发行版本1.3、Linux发展历史1.4、Linux内核版本1.5、Linux主要发行版本 二、开…...
【JavaSE复习】数据结构、集合
JavaSE 复习 1.数据结构1.1 查找1.1.1 基本查找1.1.2 二分查找1.1.3 插值查找1.1.4 斐波那契查找1.1.5 分块查找1.1.6 分块查找的扩展（无规律数据） 1.2 排序1.2.1 冒泡排序1.2.2 选择排序1.2.3 插入排序1.2.4 快速排序 2. 集合2.1 基础集合2.1.1 集合和数…...
Java版Flink使用指南——自定义无界流生成器
大纲 新建工程自定义无界流 使用打包、提交、运行工程代码 在《Java版Flink使用指南——从RabbitMQ中队列中接入消息流》一文中，我们让外部组件RabbitMQ充当了无界流的数据源，使得Flink进行了流式处理。在《Java版Flink使用指南——将消息写入到RabbitMQ…...
Vue3框架搭建4：配置说明-eslint配置
配置说明： .eslintrc.cjs： /* eslint-env node */ //node环境，并引入一个模块解析补丁 require(rushstack/eslint-patch/modern-module-resolution)module.exports { //继承其他配置root: true, //跟配置文件，ESLint不会在父目…...
JavaFx+MySql学生管理系统
前言: 上个月学习了javafx和mysql数据库,于是写了一个学生管理系统,因为上个月在复习并且有一些事情,比较忙,所以没有更新博客了,这个项目页面虽然看着有点简陋了,但是大致内容还是比较简单的,于是现在跟大家分享一下我的学生管理系统,希望对这方面有兴趣的同学提供一些帮助 &a…...
Java--抽象类
1.抽象--abstract 2.不能对抽象类进行实例化，也就是不能new这个抽象类 3.抽象类的应用，就是在class前加入abstract这个单词，同理抽象方法也是在void前加入abstract 4.在抽象类中可以写普通方法，但抽象方法只能写在抽象类中 5.…...
26.Labview波形图、XY图、强度图使用精讲
我们如何使用Labview显示曲线或者制作出下面这种我们想要的曲线并随着我们输入值的变化而变化呢？ 本文详细讲解一下每种波形图的使用方式，帮助大家深入了解波形图的使用技巧。 文章中所有程序均可在百度网盘下载，下载方式：复制下…...
系统启动 | 安全启动时 “地址线” 被篡改了怎么办？
Hi，你们有没有想过，在咱们启动的过程中，就算是开了安全启动。但是如果在执行最后一条跳转指令时，如果此时改变FLASH或者DDR的地址线，相当于跳转到了非法的地址，那安全启动功能不就丧失了吗？ 提到…...
Kafka基础组件图推演
文章目录 1. Controller Broker保障机制 2. 组件架构1. Log Manager2. Replication Manager3. SocketServer4. NetworkServer5. ZKClient 1. Controller Broker Kafka集群中有一个Controller Broker，负责元数据管理和协调。 Kafka使用Zookeeper作为集群元数据的存储…...
k8s中使用cert-manager生成自签名证书
一、安装 cert-manager 注意查看cert-manager和K8S支持的对应版本 我的 k8sv1.28.2，cert-manager v1.12.11 下载 cert-manager.yaml 文件，执行 kubectl apply -f cert-manager.yaml注意:安装成功后如果应用路由使用了Ingress，应用路由不需要…...
处于群晖Docker中的HomeAssistant监控宿主机CPU温度
处于群晖Docker中的HomeAssistant监控宿主机CPU温度 解决方案 在configuration.yaml中添加： sensor: - platform: filename: "Host Temperature" # 可以自定义file_path: /sys/class/hwmon/hwmon0/temp1_inputvalue_template: "{{ int(value)/100…...
STM32串口工作原理
STM32的串口是相当丰富的，功能也很强劲。最多可提供5 路串口，有分数波特率发生器、支持单线光通信和半双工单线通讯、支持LIN、智能卡协议和IrDA SIRENDEC 规范(仅串口3支持)、具有DMA等。 串口最基本的设置，就是波特率的设置。STM32的串口使…...
STM32杂交版（HAL库、音乐盒、闹钟、点阵屏、温湿度）
一、设计描述 本设计精心构建了一个以STM32MP157A高性能单片机为核心控制单元的综合性嵌入式系统。该系统巧妙融合了蜂鸣器、数码管显示器、点阵屏、温湿度传感器、LED指示灯以及按键等多种外设模块，形成了一个功能丰富、操作便捷的杂交版智能设备。通过串口…...
多输入多输出 | Matlab实现Transformer多输入多输出预测
多输入多输出 | Matlab实现Transformer多输入多输出预测 目录 多输入多输出 | Matlab实现Transformer多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现Transformer多输入多输出预测（完整源码和数据） 1.da…...
Linux文件编程（标准C库）
目录 一、标准C库打开/创建文件，读写文件，光标移动 二、标准C库写入结构体到文件 三、其他函数补充 1.fputc函数 2.feof函数和fgetc函数 前面讲到的open函数都是基于linux内核的，也就是说在Windows系统上无法运行，移植性比较…...
生产英特尔CPU处理器繁忙的一天
早晨：准备与检查 7:00 AM - 起床与准备 工厂员工们早早起床，快速洗漱并享用早餐。为了在一天的工作中保持高效，他们会进行一些晨间锻炼，保持头脑清醒和身体活力。 8:00 AM - 到达工厂 员工们到达英特尔的半导体制造工厂&#…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
HarmonyOS运动开发：如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言 在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...