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

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

news 2026/4/2 6:16:10

 中间内容高度不够屏幕高度撑不开的页面时候，页面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部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候&#xff0c;页面footer部分都能保持在网页页脚&#xff08;最底部&#xff09;的方法 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 网络编程的前置知识&#xff0c;例如网络的发展、协议和协议栈分层、网络通信原理、网络地址等&#xff0c;为后续进入 Linux 网络编程作铺垫。 目录 一、网络发展 二、网络协议 1&#xff09;协议的作用 2&#xff09;协议栈 3&#xff09;协议分层…...

编程日记 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指标）

业精于勤荒于嬉&#xff0c;行成于思毁于随。 今天这篇算是Linux的正式学习&#xff0c;废话不多说&#xff0c;我们开始吧 第三篇 一、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 分块查找的扩展&#xff08;无规律数据&#xff09; 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中队列中接入消息流》一文中&#xff0c;我们让外部组件RabbitMQ充当了无界流的数据源&#xff0c;使得Flink进行了流式处理。在《Java版Flink使用指南——将消息写入到RabbitMQ…...

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

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

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

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

JavaFx+MySql学生管理系统

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

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

Java--抽象类

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

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

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

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

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

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

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

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

Kafka基础组件图推演

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

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

k8s中使用cert-manager生成自签名证书

一、安装 cert-manager 注意查看cert-manager和K8S支持的对应版本 我的 k8sv1.28.2&#xff0c;cert-manager v1.12.11 下载 cert-manager.yaml 文件&#xff0c;执行 kubectl apply -f cert-manager.yaml注意:安装成功后如果应用路由使用了Ingress&#xff0c;应用路由不需要…...

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

处于群晖Docker中的HomeAssistant监控宿主机CPU温度

处于群晖Docker中的HomeAssistant监控宿主机CPU温度 解决方案 在configuration.yaml中添加&#xff1a; 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的串口是相当丰富的&#xff0c;功能也很强劲。最多可提供5 路串口&#xff0c;有分数波特率发生器、支持单线光通信和半双工单线通讯、支持LIN、智能卡协议和IrDA SIRENDEC 规范(仅串口3支持)、具有DMA等。 串口最基本的设置&#xff0c;就是波特率的设置。STM32的串口使…...

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

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

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

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

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

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

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

Linux文件编程（标准C库）

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

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

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

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

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

港科夜闻 | 香港科大“长者护脑社区计划“为6,000名长者提供阿尔兹海默症早筛

关注并星标每周阅读港科夜闻建立新视野 开启新思维1、香港科技大学3月23日宣布推出为期五年的 “长者护脑社区计划”。这项开创性计划以社区为本&#xff0c;旨在为香港基层长者提供阿尔兹海默症及轻度认知障碍的早期检测。香港科大将联同东华学院及十多间社福机构&#xff0c;…...

编程新知 2026/4/2 6:00:05

Phi-4-mini-reasoning逻辑推理效果展示：图灵测试级数学对话与错误自检能力

Phi-4-mini-reasoning逻辑推理效果展示&#xff1a;图灵测试级数学对话与错误自检能力 1. 模型简介 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理。作为Phi-4模型家族的一员&#xff0c;它经过专门微调以提升数…...

编程新知 2026/4/2 4:43:28

告别SSH一息屏就断连！用Termux-wake-lock让你的手机后台稳定运行

告别SSH一息屏就断连&#xff01;用Termux-wake-lock让你的手机后台稳定运行 你是否遇到过这样的场景&#xff1a;正通过电脑SSH连接到手机的Termux环境进行开发调试&#xff0c;突然一个微信消息弹出&#xff0c;切出去回复后&#xff0c;SSH连接立刻中断&#xff1f;或是手机…...

编程新知 2026/4/2 4:39:28

OpenClaw技能扩展：千问3.5-35B-A3B-FP8驱动的内容生成与发布

OpenClaw技能扩展&#xff1a;千问3.5-35B-A3B-FP8驱动的内容生成与发布 1. 为什么选择OpenClaw千问3.5做内容自动化 去年冬天&#xff0c;当我第一次尝试用AI自动化完成公众号内容生产时&#xff0c;经历了典型的"缝合怪"工作流&#xff1a;ChatGPT生成初稿→Midj…...

编程新知 2026/4/2 4:37:21

用Python写AI版石头剪刀布：教你用机器学习预测对手出拳（TensorFlow实战）

用Python构建AI驱动的石头剪刀布游戏&#xff1a;从数据收集到模型部署全流程 石头剪刀布这个看似简单的游戏&#xff0c;实际上蕴含着丰富的决策模式和人类行为规律。作为一名长期研究游戏AI的开发者&#xff0c;我发现用机器学习预测玩家出拳模式远比随机选择有趣得多。本文将…...

编程新知 2026/4/2 3:05:29

STM32危化品管理系统设计与实现

1. 项目背景与需求分析实验室危化品管理一直是科研机构面临的重要挑战。传统的人工记录方式存在效率低下、容易出错、无法实时监控等问题&#xff0c;尤其对于易燃、易爆或有毒化学品的管理更是隐患重重。我曾参与过多个高校实验室的安全改造项目&#xff0c;亲眼见过因管理不善…...

编程新知 2026/4/2 2:39:04

【Java低代码组件调试黄金法则】：20年架构师亲授5大高频故障定位技巧，90%开发者从未听说

第一章&#xff1a;Java低代码组件调试的本质与认知跃迁Java低代码平台并非屏蔽复杂性&#xff0c;而是将复杂性重新封装、可视化与可追溯化。调试低代码组件的本质&#xff0c;是穿透表层拖拽逻辑&#xff0c;定位其背后生成的Java字节码、Spring Bean生命周期行为、以及运行时…...

编程新知 2026/4/2 2:34:52

【若依】框架：从零构建前后端分离项目实战

1. 环境准备与项目初始化 第一次接触若依框架时&#xff0c;我被它"开箱即用"的特性惊艳到了。这个基于Spring Boot的权限管理系统&#xff0c;前后端分离架构设计得非常清晰。下面我会手把手带你完成环境搭建&#xff0c;过程中遇到的坑也会一并说明。 开发环境需要…...

编程新知 2026/4/1 23:58:42

3分钟搞定100个Excel文件：极速多表格查询工具让数据搜索效率提升30倍

3分钟搞定100个Excel文件&#xff1a;极速多表格查询工具让数据搜索效率提升30倍 【免费下载链接】QueryExcel 多Excel文件内容查询工具。 项目地址: https://gitcode.com/gh_mirrors/qu/QueryExcel 你是否经历过这样的绝望时刻&#xff1f;当领导要求从20个Excel报表中…...

编程新知 2026/4/1 23:38:25

Phi-3-mini-4k-instruct新手入门：Ollama部署详解，从安装到第一个对话

Phi-3-mini-4k-instruct新手入门&#xff1a;Ollama部署详解&#xff0c;从安装到第一个对话 1. 认识Phi-3-mini-4k-instruct&#xff1a;轻量级AI助手 Phi-3-mini-4k-instruct是一个仅有38亿参数的轻量级语言模型&#xff0c;由微软团队开发。虽然体积小巧&#xff0c;但它在…...

编程新知 2026/4/1 22:59:45