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

上下固定中间自适应布局

news 2026/3/27 12:48:57

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

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

MFCMouseEffect：把桌面输入反馈这件事，做成一个真正可扩展的引擎

MFCMouseEffect&#xff1a;把桌面输入反馈这件事&#xff0c;做成一个真正可扩展的引擎 很多录屏、教程、演示和桌面工具&#xff0c;功能本身已经足够好&#xff0c;但一到“用户看你怎么操作”这一步&#xff0c;体验就会突然掉下来。 为什么&#xff1f; 因为点击不够明…...

编程新知 2026/3/27 10:53:51

VSCode + CMake + MinGW 配置踩坑实录：从‘make’命令报错到一键编译调试全搞定

VSCode CMake MinGW 配置踩坑实录&#xff1a;从‘make’命令报错到一键编译调试全搞定 如果你正在尝试用VSCode搭建C开发环境&#xff0c;大概率已经看过无数篇教程&#xff0c;但依然会在某个环节卡住——可能是CMake找不到编译器&#xff0c;可能是调试器无法启动&#x…...

编程新知 2026/3/27 9:59:20

数智驱动 人才筑基——拔尖创新人才与卓越工程师培养论坛举行

3月22日&#xff0c;第二届高等院校新工科人才培养暨产教融合发展大会在北京举行。大会以“科技创新 智造未来”为主题&#xff0c;来自全国各地的本科院校、职业院校、行业企业以及媒体等1000余位嘉宾参会。22日下午&#xff0c;数智驱动 人才筑基——拔尖创新人才与卓越工程师…...

编程新知 2026/3/27 9:08:49

LFM2.5-1.2B-Thinking-GGUF效果展示：同一Prompt下Thinking中间态与终版回答对比图

LFM2.5-1.2B-Thinking-GGUF效果展示&#xff1a;同一Prompt下Thinking中间态与终版回答对比图 1. 模型简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;特别适合在资源有限的环境中快速部署和使用。该模型采用GGUF格式存储&#xff0c;通过ll…...

编程新知 2026/3/27 7:22:13

TI DSP BootLoader实战：从Flash分区到安全跳转的工程化指南

1. 为什么需要BootLoader&#xff1f; 想象一下你家的空调遥控器突然需要升级功能&#xff0c;但厂家要求必须拆开外壳用专用设备烧录——这显然不现实。BootLoader就是嵌入式设备的"遥控器升级按钮"&#xff0c;让设备在出厂后仍能通过常规接口&#xff08;如串口、…...

编程新知 2026/3/27 6:15:02

Realistic Vision V5.1开源镜像部署教程：Docker+Streamlit一体化环境搭建

Realistic Vision V5.1开源镜像部署教程&#xff1a;DockerStreamlit一体化环境搭建 1. 项目概述 Realistic Vision V5.1是目前SD 1.5生态中最顶级的写实风格模型之一&#xff0c;能够生成媲美专业单反相机拍摄的人像照片。本文将带你从零开始&#xff0c;通过Docker容器和St…...

编程新知 2026/3/27 5:12:43

从机器人ROS2到微服务gRPC：手把手教你用IDL定义跨语言通信的‘世界语’

从机器人ROS2到微服务gRPC&#xff1a;手把手教你用IDL定义跨语言通信的‘世界语’ 清晨的阳光透过实验室的玻璃窗洒进来&#xff0c;机械臂正在执行预设的轨迹动作&#xff0c;而云端的数据分析服务实时监控着它的能耗曲线。这个看似简单的场景背后&#xff0c;隐藏着一个复杂…...

编程新知 2026/3/27 2:36:45

AI性能测试：TPS之外还要关注什么？

在AI驱动的时代&#xff0c;性能测试已成为软件测试从业者的核心技能。传统软件测试中&#xff0c;TPS&#xff08;Transactions Per Second&#xff0c;每秒事务处理量&#xff09;常被视为黄金指标&#xff0c;用于衡量系统的吞吐能力。然而&#xff0c;AI系统因其独特的计算…...

编程新知 2026/3/27 1:48:35

1.1 AI技术全景图：从传统ML到大模型

AI技术全景图&#xff1a;从传统ML到大模型本文适合谁&#xff1a;完全没有AI背景的读者。读完这篇&#xff0c;你会知道"AI/机器学习/深度学习/大模型"这几个词是什么关系&#xff0c;以及你将要学的东西在整个AI世界里处于什么位置。AI发展经历了三个时代——本文带…...

编程新知 2026/3/27 1:42:29

高效解析快递地址：Java实现智能识别省市区与楼栋单元户室

1. 快递地址解析的痛点与Java解决方案 每天处理成千上万的快递地址是电商和物流企业最头疼的问题之一。我见过太多这样的场景&#xff1a;客服人员手动复制粘贴地址信息&#xff0c;运营团队熬夜整理Excel表格&#xff0c;配送系统因为地址格式混乱而频频出错。这些问题的根源都…...

编程新知 2026/3/27 0:51:39