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

上下固定中间自适应布局

news 2026/2/9 8:23:31

实现上下固定中间自适应布局

1.通过position：absolute实现

定义如下结构

<body>

<div class="container">

<div class="top"></div>

<div class="center"></div>

<div class="bottom"></div>

</div>

</body>

style实现如下：

<style>body,html {width: 100%;height: 100%;background-color: yellow;margin: 0;padding: 0;}.container {height: 100%;}.top,.bottom {width: 100%;height: 100px;background-color: red;}.bottom {background-color: green;}.center {position: absolute;width: 100%;/* height: 100%; *//* margin-bottom: 100px; */top: 100px;bottom: 100px;background-color: aqua;}</style>

2.通过flex布局实现，父布局高度100%，display:flex;flex-direction: column;设置纵向排列，中间设置flex:1；具体实现如下：

<style>body,html {width: 100%;height: 100%;background-color: yellow;margin: 0;padding: 0;}.container {height: 100%;/* display: flex;flex-direction: column;width: 100%; */}.top,.bottom {width: 100%;height: 100px;background-color: red;}.bottom {background-color: green;}.center {position: relative;width: 100%;/* flex: 1; */height: 100%;/* margin-bottom: 100px; *//* top: 100px; */background-color: aqua;}</style>

相关文章：

上下固定中间自适应布局

实现上下固定中间自适应布局 1.通过position&#xff1a;absolute实现 定义如下结构 <body> <div class"container"> <div class"top"></div> <div class"center"></div> <div class"bottom&…...

编程日记 2024/2/9 6:40:01

3分钟部署完成Docker Registry及可视化管理工具Docker-UI

安装docker-registry 由于镜像文件会非常占用空间&#xff0c;因此需要选择一个磁盘充裕的位置来存放镜像数据。 这里设置为&#xff1a;-v /data/registry:/var/lib/registry&#xff0c;其中/data/registry是宿主机存放数据的位置。 docker run -d -p 5000:5000 --restart…...

编程日记 2024/2/9 6:37:59

【npm】修改npm全局安装包的位置路径

问题 全局安装的默认安装路径为&#xff1a;C:\Users\admin\AppData\Roaming\npm&#xff0c;缓存路径为&#xff1a;C:\Users\admin\AppData\Roaming\npm_cache&#xff08;其中admin为自己的用户名&#xff09;。 由于默认的安装路径在C盘&#xff0c;太浪费C盘内存啦&#…...

编程日记 2024/2/9 6:34:56

数据库切片大对决：ShardingSphere与Mycat技术解析

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 数据库切片大对决&#xff1a;ShardingSphere与Mycat技术解析 前言ShardingSphere与Mycat简介工作原理对比功能特性对比 前言 在数据库的舞台上&#xff0c;有两位颇受欢迎的明星&#xff0c;它们分别…...

编程日记 2024/2/9 6:33:55

macbook电脑如何永久删除app软件?

在使用MacBook的过程中&#xff0c;我们经常会下载各种App来满足日常的工作和娱乐需求。然而&#xff0c;随着时间的积累&#xff0c;这些App不仅占据了宝贵的硬盘空间&#xff0c;还可能拖慢电脑的运行速度。那么&#xff0c;如何有效地管理和删除这些不再需要的App呢&#xf…...

编程日记 2024/2/9 6:28:49

安卓——计算器应用（Java）

步骤 1: 设置Android Studio项目 创建一个新的Android项目&#xff0c;选择Java作为编程语言。 步骤 2: 设计用户界面 打开activity_main.xml文件&#xff0c;在res/layout目录下&#xff0c;设计你的计算器用户界面。这个例子使用了LinearLayout来排列两个EditText输入框和…...

编程日记 2024/2/9 6:27:48

【笔记】Helm-5 Chart模板指南-8 命名模板

命名模板 此时需要越过模板&#xff0c;开始创建其他内容了。该部分我们会看到如何在一个文件中定义 命名模板&#xff0c;并在其他地方使用。命名模板&#xff08;有时称作一个部分或一个子模板&#xff09;仅仅是在文件内部定义的模板&#xff0c;并使用了一个名字。有两种创…...

编程日记 2024/2/9 6:24:45

Github 2024-02-08 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-08统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Ruby项目1HTML项目1Python项目1Scala项目1PLpgSQL项目1Rust项目1NASL项目1C项目1TypeScript项目1非开发语言项目…...

编程日记 2024/2/9 6:23:42

c语言贪食蛇游戏

演示视频 目录 一.概述 二.游戏开始前 修改控制台程序标题和大小 Win32 API GetStdHandle函数 GetConsoleCursorInfo函数和SetConsoleCursorInfo函数 SetConsoleCursorPosition函数 游戏开篇界面处理 创建地图 蛇身节点以及食物节点初始化 蛇身的初始化 整体蛇节点…...

编程日记 2024/2/9 6:22:41

国际物流数字化运输方式选择指南 | 箱讯科技

国际物流涉及多种运输方式&#xff0c;每种方式都有其独特的优势和适用场景。选择合适的运输方式对于确保货物安全、及时到达目的地并控制成本至关重要。以下是对六种主要国际运输方式的简要介绍和选择建议&#xff1a; 国际快递&#xff1a;适用于小件、高价值或急需的货物。…...

编程日记 2024/2/9 6:21:39

FPS游戏框架漫谈第二十天

今天我们聊的话题是&#xff1a; 《吃鸡中武器护甲逻辑》 当我们接到一个需求就是给我们游戏中的特定的模式指定的武器支持加护甲的功能 那么这个流程是什么样的呢&#xff1f; 第一步一般这个新增护甲的配置属性肯定是加载武器的Config json文件里面的呢&#xff0c;并且是支持…...

编程日记 2024/2/9 6:19:27

ChatGPT高效提问—prompt常见用法（续篇四）

ChatGPT高效提问—prompt常见用法&#xff08;续篇四&#xff09; 1.1 知识生成 ​ 知识生成是指使用自然语言处理技术&#xff0c;通过ChatGPT等AI模型生成与特定主题相关的知识、文本或回答。在知识生成过程中&#xff0c;模型接收prompt输入的问题、指令或上下文信息&…...

编程日记 2024/2/9 6:18:26

【蓝桥杯单片机记录】IO基础与LED控制

目录 一、IO基础 1.1 IAP15F2K61S2芯片原理图 1.2不同工作模式 二、新建工程的一些补充 2.1 keil中没有IAP15F2K61S2的头文件 解决&#xff1a;在isp软件中找到如下​编辑 2.2keil中的芯片选择 2.3推荐字体 三、sbit关键字 四、LED控制 4.1原理图 4.2不能直接通过IO…...

编程日记 2024/2/9 6:15:22

java 回答问题

1. How do you create a variable with the numeric value 5? int x 5; 2. The value of a string variable can be surrounded by single quotes. False 3. Which method can be used to return a string in upper case letters? toUpperCase()...

编程日记 2024/2/9 6:13:20

彻底学会系列：一、机器学习之线性回归（一）

1.基本概念(basic concept) 线性回归&#xff1a; 有监督学习的一种算法。主要关注多个因变量和一个目标变量之间的关系。 因变量&#xff1a; 影响目标变量的因素&#xff1a; X 1 , X 2 . . . X_1, X_2... X1​,X2​... &#xff0c;连续值或离散值。 目标变量&#xff1a; …...

编程日记 2024/2/9 6:11:18

FPGA：我的零基础学习路线（2022秋招已上岸）持续更新中~

可内推简历&#xff0c;丝我即可 前言 初次接触FPGA是在2022年3月左右&#xff0c;正处在研二下学期&#xff0c;面临着暑假找工作&#xff0c;周围的同学大多选择了互联网&#xff0c;出于对互联网的裁员形势下&#xff0c;我选择了FPGA&#xff0c;对于硬件基础知识我几乎是…...

编程日记 2024/2/9 6:10:18

阿里云游戏服务器多少钱一个月？

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…...

编程日记 2024/2/9 6:08:14

Win32 SDK Gui编程系列之--ListView自绘OwnerDraw(续)

通过所有者绘制的列表视图（2） 所有者绘制列表视图的基础已在前一页中说明。本页将展示如何在所有者绘制列表视图中显示数据库表数据。 1、访问日志 正如在另一个页面中所述，本网站的访问日志目前是通过SQLite3数据库管理的。 以下是上述程序执行的结果。为…...

编程日记 2024/2/9 6:07:13

Android 应用添加系统签名权限的几种方式实现介绍

Android 应用添加系统签名权限的几种方式实现介绍 文章目录 Android 应用添加系统签名权限的几种方式实现介绍一、前言二、Android 应用添加系统签名权限的几种方式介绍1、在Android Studio添加系统签名文件2、源码编译apk添加系统签名Android.mkAndroid.bp 3、源码编译app代码…...

编程日记 2024/2/9 6:06:13

麒麟V10+飞腾处理器源码编译qt

1.下载qt源码 2.百度解压命令，进行解压 3.cd进文件目录 4.使用./configure命令进行配置（重点：记得看说明） Usage: configure [-h] [-prefix <dir>] [-prefix-install] [-bindir <dir>] [-libdir <dir>][-docdir <dir>] [-headerdir <dir&g…...

编程日记 2024/2/9 5:56:01

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/12/27 19:12:09