当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/wenhui6/article/details/140357068 2025/5/4 3:10:27

中间内容高度不够屏幕高度撑不开的页面时候，页面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…...

编程日记 2024/7/12 10:28:17

Django 表单

Django 表单 Django 表单是 Web 开发中不可或缺的一部分，它允许用户与网站进行交互，如提交数据、上传文件等。在 Django 框架中，表单功能非常强大，支持各种自定义和验证，使得开发者能够轻松地处理用户输入。本文将详细介绍 Django 表单的使用方法，包括创建表单、表单字段…...

编程日记 2024/7/12 10:26:14

【Linux网络】网络基础

本篇博客整理了 Linux 网络编程的前置知识，例如网络的发展、协议和协议栈分层、网络通信原理、网络地址等，为后续进入 Linux 网络编程作铺垫。目录一、网络发展二、网络协议 1）协议的作用 2）协议栈 3）协议分层…...

编程日记 2024/7/12 10:24:12

Open3D 可视化点云配准中匹配点之间的连线

目录一、概述二、代码实现 2.1关键函数 2.2完整代码三、实现效果 3.1原始点云 3.2处理后的点云一、概述在点云配准的过程中，可视化匹配点之间的连线（匹配线）有助于更直观地理解配准结果和误差分布。以下是可视化匹配点之间连线的好处和作用： 1. 直观理…...

编程日记 2024/7/12 10:22:10

Linux编程第三篇：Linux简介，开源软件简介（Linux是否安全？参考TESEC指标）

业精于勤荒于嬉，行成于思毁于随。今天这篇算是Linux的正式学习，废话不多说，我们开始吧第三篇一、UNIX与Linux发展史1.1、UNIX发展历史和发行版本1.2、UNIX主要发行版本1.3、Linux发展历史1.4、Linux内核版本1.5、Linux主要发行版本二、开…...

编程日记 2024/7/12 10:21:08

【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 集合和数…...

编程日记 2024/7/12 10:19:06

Java版Flink使用指南——自定义无界流生成器

大纲新建工程自定义无界流使用打包、提交、运行工程代码在《Java版Flink使用指南——从RabbitMQ中队列中接入消息流》一文中，我们让外部组件RabbitMQ充当了无界流的数据源，使得Flink进行了流式处理。在《Java版Flink使用指南——将消息写入到RabbitMQ…...

编程日记 2024/7/12 10:18:04

Vue3框架搭建4：配置说明-eslint配置

配置说明： .eslintrc.cjs： /* eslint-env node */ //node环境，并引入一个模块解析补丁 require(rushstack/eslint-patch/modern-module-resolution)module.exports { //继承其他配置root: true, //跟配置文件，ESLint不会在父目…...

编程日记 2024/7/12 10:17:03

JavaFx+MySql学生管理系统

前言: 上个月学习了javafx和mysql数据库,于是写了一个学生管理系统,因为上个月在复习并且有一些事情,比较忙,所以没有更新博客了,这个项目页面虽然看着有点简陋了,但是大致内容还是比较简单的,于是现在跟大家分享一下我的学生管理系统,希望对这方面有兴趣的同学提供一些帮助 &a…...

编程日记 2024/7/12 10:16:01

Java--抽象类

1.抽象--abstract 2.不能对抽象类进行实例化，也就是不能new这个抽象类 3.抽象类的应用，就是在class前加入abstract这个单词，同理抽象方法也是在void前加入abstract 4.在抽象类中可以写普通方法，但抽象方法只能写在抽象类中 5.…...

编程日记 2024/7/12 10:13:59

26.Labview波形图、XY图、强度图使用精讲

我们如何使用Labview显示曲线或者制作出下面这种我们想要的曲线并随着我们输入值的变化而变化呢？ 本文详细讲解一下每种波形图的使用方式，帮助大家深入了解波形图的使用技巧。文章中所有程序均可在百度网盘下载，下载方式：复制下…...

编程日记 2024/7/12 10:12:57

系统启动 | 安全启动时 “地址线” 被篡改了怎么办？

Hi，你们有没有想过，在咱们启动的过程中，就算是开了安全启动。但是如果在执行最后一条跳转指令时，如果此时改变FLASH或者DDR的地址线，相当于跳转到了非法的地址，那安全启动功能不就丧失了吗？ 提到…...

编程日记 2024/7/12 10:11:55

文章目录 1. Controller Broker保障机制 2. 组件架构1. Log Manager2. Replication Manager3. SocketServer4. NetworkServer5. ZKClient 1. Controller Broker Kafka集群中有一个Controller Broker，负责元数据管理和协调。 Kafka使用Zookeeper作为集群元数据的存储…...

编程日记 2024/7/12 10:10:54

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，应用路由不需要…...

编程日记 2024/7/12 10:09:53

处于群晖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…...

编程日记 2024/7/12 10:03:45

STM32串口工作原理

STM32的串口是相当丰富的，功能也很强劲。最多可提供5 路串口，有分数波特率发生器、支持单线光通信和半双工单线通讯、支持LIN、智能卡协议和IrDA SIRENDEC 规范(仅串口3支持)、具有DMA等。串口最基本的设置，就是波特率的设置。STM32的串口使…...

编程日记 2024/7/12 10:01:43

STM32杂交版（HAL库、音乐盒、闹钟、点阵屏、温湿度）

一、设计描述本设计精心构建了一个以STM32MP157A高性能单片机为核心控制单元的综合性嵌入式系统。该系统巧妙融合了蜂鸣器、数码管显示器、点阵屏、温湿度传感器、LED指示灯以及按键等多种外设模块，形成了一个功能丰富、操作便捷的杂交版智能设备。通过串口…...

编程日记 2024/7/12 10:00:42

多输入多输出 | Matlab实现Transformer多输入多输出预测

多输入多输出 | Matlab实现Transformer多输入多输出预测目录多输入多输出 | Matlab实现Transformer多输入多输出预测预测效果基本介绍程序设计参考资料预测效果基本介绍多输入多输出 | Matlab实现Transformer多输入多输出预测（完整源码和数据） 1.da…...

编程日记 2024/7/12 9:59:40

Linux文件编程（标准C库）

目录一、标准C库打开/创建文件，读写文件，光标移动二、标准C库写入结构体到文件三、其他函数补充 1.fputc函数 2.feof函数和fgetc函数前面讲到的open函数都是基于linux内核的，也就是说在Windows系统上无法运行，移植性比较…...

编程日记 2024/7/12 9:58:39

生产英特尔CPU处理器繁忙的一天

早晨：准备与检查 7:00 AM - 起床与准备工厂员工们早早起床，快速洗漱并享用早餐。为了在一天的工作中保持高效，他们会进行一些晨间锻炼，保持头脑清醒和身体活力。 8:00 AM - 到达工厂员工们到达英特尔的半导体制造工厂&#…...

编程日记 2024/7/12 9:55:36

MVC拦截器、ThreadLocal来进行登录拦截

MVC拦截器、ThreadLocal来进行登录拦截 1. 对登录进行拦截1.1 什么是ThreadLocal1.2 定义UserHolder 类，来封装ThreadLocal方法1.3 拦截器WebMvcConfigurer 的配置1.4 登录的配置，当碰到拦截的方法的时候调用1.5 UserServiceImpl1.6 controller&#xff…...

编程日记 2024/7/12 9:54:34

小程序问题

1.获取节点 wx.createSelectorQuery() wx.createSelectorQuery().in(this) //组件中加in(this)，不然获取不到 2.使用实例 wx.createSelectorQuery().in(this).select(#share).fields({node: true,size: true}).exec(async (res) > {const canvas res[0].node;…...

编程日记 2024/7/12 9:53:33