上下固定中间自适应布局

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

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: 10

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/378774.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity BuffSystem buff系统

Unity BuffSystem buff系统 一、介绍二、buff系统架构三、架构讲解四、框架使用buff数据Json数据以及工具ShowTypeBuffTypeMountTypeBuffOverlapBuffShutDownTypeBuffCalculateType时间和层数这里也不过多说明了如何给生物添加buff 五、总结 一、介绍 现在基本做游戏都会需要些…

springboot167基于springboot的医院后台管理系统的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

【JS逆向五】逆向模拟某网站的生成的【jsonKey】值 仅供学习

逆向日期&#xff1a;2024.02.07 使用工具&#xff1a;Node.js 加密方法&#xff1a;AES 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 可使用AES进行解密处理&#xff08;直接解密即可&#xff09;&#xff1a;在线AES加解密工具 1、打开…

作业2.8

1、选择题 1.1、以下选项中,不能作为合法常量的是 ____B______ A&#xff09;1.234e04 B&#xff09;1.234e0.4 C&#xff09;1.234e4 D&#xff09;1.234e0 1.2、以下定义变量并初始化错误的是_____D________。 A) char c1 ‘H’ &#xff1b; B) char c…

MPLS VPN功能组件

VPN实例 VPN实例即为VPN路由转发表VRF&#xff0c;不同VPN之间的路由隔离通过VPN实例实现&#xff0c;PE上存在多个路由转发表&#xff0c;包括一个公网路由转发表&#xff0c;以及一个或多个VPN路由转发表。 PE为每个直接相连的Site建立并维护专门的VPN实例&#xff0c;VPN实…

JavaScript表单:事件和方法提交

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 表单 是 web 开发中不可或缺的一部分&#xff0c;用于收集用户输入的…

Bootstrap学习三

Bootstrap学习三 文章目录 前言四、Bootstrap插件4.1. 插件概览4.1.1. data属性4.1.2. 编程方式的API4.1.3. 避免命名空间冲突4.1.4. 事件 4.2. 模态框4.2.1. 引入4.2.2. 基本结构4.2.3. 基本使用4.2.4. 触发模态框的方法 4.3. 下拉菜单和滚动监听4.3.1. 下拉菜单4.3.2. 滚动监…

创建个人的AI智能体agent

我在魔塔空间创建了一个作息时间管理的agent >>>>>点我体验<<<<<< Agent并非ChatGPT升级版&#xff0c;它不仅告诉你“如何做”&#xff0c;更会帮你去做&#xff01; 尽管ChatGPT的知识储备接近“全知全能”&#xff0c;但当你试着以AI助手…

Stable Diffusion 模型下载:ToonYou(平涂卡通)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 ToonYou 是一个平涂风格的卡通模型&#xff0c;它的画风独特、光感强烈、画面表现力强、场景结构完整&#xff0c;一张张图犹如动画电影截图&#xff0c;非常值得推…

ArcGIS学习(六)地理数据库

ArcGIS学习(六)地理数据库 上个任务我们讲了一个非常重要的知识点一一坐标系。这个任务我们带来另外一个很重要的知识点一一地理数据库。 地理数据库的内容相比于坐标系简单很多! 首先,先让我们来学习下地理数据库的理论。 ArcGIS 中的地理数据库(Geodatabase)是一个用…

一文讲透Python函数中的形式参数和实际参数

函数参数包括形式参数和实际参数&#xff0c;简称形参和实参。其中形式参数即是在定义函数时函数后面括号中的参数列表&#xff08;parameterlist&#xff09;&#xff0c;比如上一个帖子的示例中的width, length&#xff1b;实际参数则是调用函数时函数后面括号中的参数值&…

前端架构: 从vue-cli探究脚手架原理

从使用角度理解什么是脚手架 脚手架本质是一个操作系统的客户端 在终端中去执行一个命令&#xff0c;这个命令本身它就是一个客户端我们其实可以把脚手架理解为操作系统的一个客户端通过命令去执行它的时候&#xff0c;这个命令往往是这样的一个构造&#xff0c;如下 比如&…

Ajax 详解及其使用

Ajax&#xff08;Asynchronous JavaScript and XML&#xff09;是一种在客户端与服务器之间进行异步通信的技术&#xff0c;它允许网页在不重新加载整个页面的情况下&#xff0c;与服务器交换数据并更新部分网页内容。Ajax 的核心是XMLHttpRequest&#xff08;XHR&#xff09;对…

Go 语言中如何大小端字节序?int 转 byte 是如何进行的?

嗨&#xff0c;大家好&#xff01;我是波罗学。 本文是系列文章 Go 技巧第十五篇&#xff0c;系列文章查看&#xff1a;Go 语言技巧。 我们先看这样一个问题&#xff1a;“Go 语言中&#xff0c;将 byte 转换为 int 时是否涉及字节序&#xff08;endianness&#xff09;&#x…

Java SE多态

文章目录 1.多态&#xff1a;1.1.什么是多态&#xff1a;1.2.多态实现条件&#xff1a;1.2.1.重写&#xff1a;1.2.2.向上转型&#xff1a; 1.多态&#xff1a; 1.1.什么是多态&#xff1a; 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去…

软件应用实例分享,电玩计时计费怎么算,佳易王PS5游戏计时器系统程序教程

软件应用实例分享&#xff0c;电玩计时计费怎么算&#xff0c;佳易王PS5游戏计时器系统程序教程 一、前言 以下软件教程以 佳易王电玩计时计费管理系统软件V17.9为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 点击开始计时后&#xff0c;图片…

课时17:本地变量_命令变量

2.2.3 命令变量 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 基本格式 定义方式一&#xff1a;变量名命令注意&#xff1a; 是反引号定义方式二&#xff1a;变量名$(命令)执行流程&#xff1a;1、执行 或者 $() 范围内的命令…

2021年通信工程师初级 实务 真题

文章目录 一、第1章 现代通信网概述&#xff0c;通信网的定义。第10章 通信业务&#xff0c;普遍服务原则10.2.4 通信行业的发展趋势&#xff08;六化&#xff09; 二、第2章 传输网SDH帧结构SDH线路保护倒换&#xff0c;“11 保护”和“1:1保护”波长值λc/f&#xff0c;中心频…

treeData 树结构数据处理(react)

1.什么是tree 树(tree)形结构是一种重要的非线性结构&#xff0c;依据分支关系定义的层次结构&#xff0c;在这种结构中&#xff0c;每个元素至多只有一个前趋&#xff0c;但可以有多个后继。 树的定义&#xff1a;树(Tree)是n(n 大于等于0)个节点的有限集合T&#xff0c;当n0…

【Flink入门修炼】1-3 Flink WordCount 入门实现

本篇文章将带大家运行 Flink 最简单的程序 WordCount。先实践后理论&#xff0c;对其基本输入输出、编程代码有初步了解&#xff0c;后续篇章再对 Flink 的各种概念和架构进行介绍。 下面将从创建项目开始&#xff0c;介绍如何创建出一个 Flink 项目&#xff1b;然后从 DataStr…