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

上下固定中间自适应布局

news 2026/5/14 9:18:32

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

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

大模型微调实战：用百元级GPU打造专属AI助手

测试工程师的AI困局与破局在软件测试领域&#xff0c;我们每天都在与各种文本打交道——测试用例、缺陷报告、自动化脚本、需求文档、评审记录。大语言模型&#xff08;LLM&#xff09;的爆发让我们看到了提效的曙光&#xff0c;但很快就会发现&#xff0c;通用模型对测试业务的…...

编程新知 2026/5/14 4:06:55

告别大影像卡顿：手把手教你用GISBox做影像切片

从城市规划的精准布局&#xff0c;到自然资源的合理开发利用&#xff0c;再到应急救援的高效指挥&#xff0c;GIS影像都扮演着至关重要的角色。而影像切片技术&#xff0c;作为GIS影像处理和应用的关键环节&#xff0c;更是为我们解决了诸多实际难题&#xff0c;让GIS影像的应用…...

编程新知 2026/5/14 1:39:53

宠物胰岛素注射剂量安全指南：从单位与毫升混淆到规范操作

1. 从一次惊险的“救援”说起&#xff1a;宠物用药中的剂量迷思昨天早上&#xff0c;我差点目睹了一场因误解而引发的悲剧。走进厨房准备冲杯咖啡时&#xff0c;我看到一位同事&#xff08;我们暂且称她为“A女士”&#xff09;正准备给她刚被诊断为糖尿病的小狗注射胰岛素。她…...

编程新知 2026/5/14 1:19:11

八、命令行参数和环境变量

八、命令行参数和环境变量8.1 命令行参数8.2 环境变量概念8.3 常见环境变量8.4 查看环境变量指令测试 PATH8.5 环境变量相关命令8.6 环境变量组织方式8.7 环境变量通常具有全局属性进程创建机制环境变量的存储结构代码执行流程总结8.8 获取环境变量命令行第三个参数通过第三方变…...

编程新知 2026/5/14 1:13:00

Angular+Claude协同开发全栈实践（企业级项目落地手册）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AngularClaude协同开发全栈实践&#xff08;企业级项目落地手册&#xff09; 在现代企业级应用开发中&#xff0c;前端框架与AI辅助编程的深度集成正成为提效关键。Angular 提供结构化、可扩展的单页应…...

编程新知 2026/5/13 21:49:08

热成像与计算机视觉融合：打造免提可穿戴交互新范式

1. 项目概述&#xff1a;从一次“意外”到可穿戴交互新范式 在实验室里摆弄新到的热成像相机&#xff0c;这原本只是一个打发时间的“快乐意外”。我的咖啡杯、显示器&#xff0c;甚至是我自己的脸&#xff0c;在热成像镜头下都呈现出有趣的温度图案。但真正让我停下手中咖啡的…...

编程新知 2026/5/13 21:00:09

在Windows上优雅观看B站：BiliBili-UWP第三方客户端完全指南

在Windows上优雅观看B站&#xff1a;BiliBili-UWP第三方客户端完全指南 【免费下载链接】BiliBili-UWP BiliBili的UWP客户端&#xff0c;当然&#xff0c;是第三方的了 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP 还在用浏览器看B站视频吗&#xff1f;卡…...

编程新知 2026/5/13 20:51:45

终极指南：Marketing-for-Engineers心理学应用——影响用户决策的12个心理效应

终极指南&#xff1a;Marketing-for-Engineers心理学应用——影响用户决策的12个心理效应 【免费下载链接】Marketing-for-Engineers A curated collection of marketing articles & tools to grow your product. 项目地址: https://gitcode.com/gh_mirrors/ma/Marketin…...

编程新知 2026/5/13 19:52:51

技术新人的“导师红利”：如何让前辈心甘情愿带你？

在软件测试这个领域&#xff0c;技术新人的成长路径往往决定了他未来能走多远。测试不像开发那样有清晰的代码逻辑可循&#xff0c;它更像一门“破案”的艺术&#xff0c;需要经验、直觉和对业务深刻的理解。而这些&#xff0c;恰恰是书本和教程给不了的。于是&#xff0c;一个…...

编程新知 2026/5/13 17:38:33

Stata 数据处理实战：时间序列数据的日期转换与聚合

1. 时间序列数据处理的常见痛点 刚接触时间序列分析的朋友们&#xff0c;经常会遇到这样的困扰&#xff1a;从Excel导入的数据明明是日期格式&#xff0c;到了Stata里却变成了看不懂的字符&#xff1b;想按周汇总销售数据&#xff0c;却发现系统根本不认识"2023-W15"…...

编程新知 2026/5/13 15:18:09