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

上下固定中间自适应布局

news 2026/3/27 11:05:45

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

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

2026-3-26、可变字符串类型StringBuilder

*为什么使用StringBuiler&#xff1a; string是不可变字符串类型&#xff0c;意味着一旦修改就无法修改&#xff1a; string s "Hello"; s s " World"; // 看起来是修改&#xff0c;实际上是创建了新对象// 原来的"Hello"对象还在内存中stri…...

编程新知 2026/3/27 10:45:49

嵌入式开发实战：用状态机+事件驱动框架搞定串口通信（附完整代码）

嵌入式开发实战&#xff1a;状态机与事件驱动框架在串口通信中的高效应用 串口通信作为嵌入式系统中最基础也最常用的外设接口之一&#xff0c;其稳定性和效率直接影响着整个系统的性能表现。传统的轮询式串口处理方式不仅占用大量CPU资源&#xff0c;还难以应对复杂通信协议和…...

编程新知 2026/3/27 10:07:28

Leptin30；YQQVLTSLPSQNVLQIANDLENLRDLLHLL (mouse)

一、基本信息名称&#xff1a; Leptin30&#xff08;小鼠源瘦素功能片段肽&#xff09;单字母序列&#xff1a; YQQVLTSLPSQNVLQIANDLENLRDLLHLL三字母序列&#xff1a; Tyr-Gln-Gln-Val-Leu-Thr-Ser-Leu-Pro-Ser-Gln-Asn-Val-Leu-Gln-Ile-Ala-Asn-Asp-Leu-Glu-Asn-Leu-Arg-Asp…...

编程新知 2026/3/27 9:31:04

SolidWorks2021设计库隐藏技巧：如何自定义Toolbox标准件库满足企业需求

SolidWorks 2021企业级Toolbox深度定制&#xff1a;打造标准化设计引擎 在企业级机械设计环境中&#xff0c;标准化程度直接决定了团队协作效率和设计质量。SolidWorks 2021的Toolbox功能远不止是一个标准件库&#xff0c;当经过深度定制后&#xff0c;它能成为企业设计流程的中…...

编程新知 2026/3/27 6:33:17

LyricsX：突破平台限制，重构macOS歌词体验的开源解决方案

LyricsX&#xff1a;突破平台限制&#xff0c;重构macOS歌词体验的开源解决方案 【免费下载链接】LyricsX &#x1f3b6; Ultimate lyrics app for macOS. 项目地址: https://gitcode.com/gh_mirrors/ly/LyricsX 在流媒体音乐蓬勃发展的今天&#xff0c;音乐爱好者们却常…...

编程新知 2026/3/27 6:17:03

PHP 数组 vs SPL 数据结构：队列与栈场景下的性能对决

PHP 数组 vs SPL 数据结构&#xff1a;队列与栈场景下的性能对决在 PHP 开发中&#xff0c;我们常常面临一个经典的选择&#xff1a;是使用灵活的原生数组&#xff08;Array&#xff09;模拟队列/栈&#xff0c;还是使用标准库&#xff08;SPL&#xff09;提供的 SplQueue 和 S…...

编程新知 2026/3/27 6:07:01

OpenSSH用户枚举漏洞(CVE-2018-15473)修复实战：从检测到升级的完整指南

OpenSSH用户枚举漏洞(CVE-2018-15473)修复实战&#xff1a;从检测到升级的完整指南 在当今的网络安全环境中&#xff0c;SSH服务作为远程管理服务器的标准协议&#xff0c;其安全性直接关系到整个系统的防护水平。2018年曝光的OpenSSH用户枚举漏洞(CVE-2018-15473)虽然CVSS评分…...

编程新知 2026/3/27 5:57:00

类和对象(中)——运算符重载

引入语言在语法上可以直接用指令实现运算符对 内置类型 的操作C中加入了类类型&#xff0c;那如何使用以前的运算符&#xff08;如 - * / 等&#xff09;&#xff0c;对类类型进行操作呢&#xff1f;由此引入运算符重载&#xff1a;C为了增强代码的可读性引入了运算…...

编程新知 2026/3/27 5:57:00

DeepSeek-OCR-2实战案例：高校教务系统成绩单OCR+学分绩点自动计算

DeepSeek-OCR-2实战案例&#xff1a;高校教务系统成绩单OCR学分绩点自动计算 本文介绍如何利用DeepSeek-OCR-2模型实现高校教务系统成绩单的OCR识别&#xff0c;并结合vLLM推理加速和Gradio前端展示&#xff0c;构建一个完整的成绩单识别与学分绩点自动计算系统。 1. 项目背景与…...

编程新知 2026/3/27 5:55:00

c++ 字符大小写转化

#include <iostream> using namespace std;int main() {char a;cin >> a;//a-z-97-122//A-Z-65-90//差32//小写转大写 if(97<(int)a && (int)a<122){a(int)a-32;cout << a; return 0; }//大写转小写 if(65<(int)a && (int)a<90)…...

编程新知 2026/3/27 4:48:04