height百分比失效

heigh:100%失效

解决方案:

第一种
html, body {
height: 100%;
}
第二种
div {
height: 100%;
position: absolute;
}

非定位元素的宽高百分比计算不会将 padding 计算在内,而定位元素会计算在内。

利用这个特性可以实现图片左右半区点击分别上一张图下一张图效果

<style>
.box {display: inline-block;position: relative;
}
.prev, 
.next {width: 50%; height: 100%;position: absolute;top: 0;opacity: .5;
}
.prev {left: 0;background-color: #cd0000;
}
.next {right: 0;background-color: #34538b;
}
</style><div class="box"><a href="javascript:" class="prev" title="上一张">上一张</a><a href="javascript:" class="next" title="下一张">下一张</a><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2249893882,1165836821&fm=27&gp=0.jpg">
</div>

本文转载于:猿2048➤https://www.mk2048.com/blog/blog.php?id=ikhab0j&title=height百分比失效

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java堆空间,本机堆和内存问题

最近&#xff0c;我在和一个朋友讨论为什么Java进程使用的内存比启动Java进程时设置的最大堆多。 代码创建的所有Java对象都是在Java堆空间内创建的&#xff0c;其大小由-Xmx选项定义。 但是一个Java进程由很多空间组成&#xff0c;而不仅仅是Java堆空间。 以下是组成Java进程…

mysql视图表怎么设置约束_MySQL一一sql的视图、索引、约束

一、视图本质上相当于一张**“虚拟表”**&#xff0c;可当作独立的一张表进行操作(增、删、改、查)** 作用&#xff1a;**** a)**可通过权限控制&#xff0c;只将“表中的少数列”暴露给数据库用户&#xff0c;而不让该用户直接操纵数据库中“实际表”** b)**…

Software Development Life Cycle

转载于:https://www.cnblogs.com/genezhao/p/6879848.html

python中 的用法_详解python中@的用法

python中的用法 是一个装饰器&#xff0c;针对函数&#xff0c;起调用传参的作用。 有修饰和被修饰的区别&#xff0c;function作为一个装饰器&#xff0c;用来修饰紧跟着的函数&#xff08;可以是另一个装饰器&#xff0c;也可以是函数定义&#xff09;。 代码1 结果1 Its fun…

ArrayAndString(数组和字符串)

1.实现一个算法&#xff0c;确定一个字符串的所有字符是否全都不同。假使不允许使用额外的数据结构&#xff0c;又该怎么处理&#xff1f; public class UniqueChars {public static void main(String[] args) {// TODO Auto-generated method stubString string "abcdef…

MyBatis教程– CRUD操作和映射关系–第2部分

为了说明这一点&#xff0c;我们正在考虑以下示例域模型&#xff1a; 会有用户&#xff0c;每个用户可能都有一个博客&#xff0c;每个博客可以包含零个或多个帖子。 这三个表的数据库结构如下&#xff1a; CREATE TABLE user (user_id int(10) unsigned NOT NULL auto_incr…

position 的属性值

理论上来说&#xff0c;全部 position 的取值有8个 包括&#xff1a;position&#xff1a;static | relative | absolute | fixed | sticky | initial | inherit | unset 其中最常用的是 static 、relative、absolute、fixed 和 sticky initial、inherit、unset 是css的关键…

[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承&#xff0c;因为js中没有后端语言中的类式继承。所以js中的继承&#xff0c;一般都是原型继承(prototype)。 function P (name){this.name name;this.say function(){console.log(p);} }function S (name,id){this.id id;this.eat function(){conso…

mysql数据库应用的权限层级_MySQL数据库的用户权限管理

嗨&#xff01;各位小伙伴今天翻了一下历史记录MySQL 数据库还有点内容今天开始我们就来补上吧~用户权限管理伙伴们要知道&#xff0c;在数据库方面有两个方向。一个是数据库管理员(Database Administrator)简称DBA&#xff0c;一个是数据库开发工程师(Database Developer)&…

linux i2c adapter 增加设备_Linux驱动之I2C驱动架构

一、Linux的I2C体系结构主要由三部分组成&#xff1a;(1) I2C核心提供I2C控制器和设备驱动的注册和注销方法&#xff0c;I2C通信方法&#xff0c;与适配器无关的代码以及探测设备等。(2) I2C控制器驱动(适配器)(3) I2C设备驱动二、重要的结构体i2c_adapter//i2c控制器(适配器)i…

Alpha-end

前言 失心疯病源10团队代码管理github个人感悟 肝不动了&#xff0c;肝不动了。明天如果见不到我&#xff0c;不要太想我。站立会议 队名&#xff1a;PMS530雨勤&#xff08;组长&#xff09; 今天完成了那些任务 熬夜肝代码代码签入github明天的计划 肝到凌晨还剩下哪些任务 团…

html 01前沿-web介绍

1. 认识网页 网页主要由文字、图像和超链接等元素构成。当然&#xff0c;除了这些元素&#xff0c;网页中还可以包含音频、视频以及Flash等。 2. 浏览器&#xff08;显示代码&#xff09; 浏览器是网页显示、运行的平台&#xff0c;常用的浏览器有IE、火狐&#xff08;Firefox…

避免写慢SQL

最近在整理数据库中的慢SQL&#xff0c;同时也查询了相关资料。记录一下&#xff0c;要学会使用执行计划来分析SQL。 1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存。这是提高性最有效的方法之一&#xff0c;而且这是被MySQL的数据库引擎处理的。当有很多相同…

为什么子孙后代会讨厌使用java.util.Stack

在我用无意义的重言式杀死你之前&#xff0c;这是要点 如果您的应用程序接近实时&#xff0c;或者将代码发送到Mars&#xff0c;则需要保留Java中默认的Stack实现。 根据LinkedList编写您自己的版本。 同样&#xff0c;如果您的应用程序是关键任务&#xff0c;并且希望堆栈由…

play 连接mysql_Play framework 2.x 连接mysql | 学步园

笔者所使用的系统为64位 windows7。本文假设java1.5版本以上环境已经搭好&#xff0c;play 框架已经下载至本地。首先我们创建一个项目。命令行进入play的目录命令&#xff1a;play new demo再次输入项目名字输入2 选择java项目创建完成界面OK&#xff0c;一个play框架下的java…

rpm -e --nodeps_微课 | rpm的思维导图

前导课程&#xff1a;微课 | rpm的查询、升级与卸载命令本次微课将演示使用xmind绘制rpm思维导图的过程&#xff0c;包括视频文字&#xff0c;大约需要你10分钟。另外&#xff0c;文末还有一则IT冷笑话&#xff0c;学习之余、会心一笑:)这个思维导图将包含以下内容&#xff1a;…

CentOS7搭建lamp环境

Mysql安装 CentOS 7 版本将MySQL数据库软件从默认的程序列表中移除&#xff0c;用mariadb代替了。MariaDB数据库管理系统是MySQL的一个分支&#xff0c;主要由开源社区在维护&#xff0c;采用GPL授权许可。开发这个分支的原因之一是&#xff1a;甲骨文公司收购了MySQL后&#x…

border-sizing属性详解和应用

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式&#xff0c;不再冗赘。1. 属性讲解 content-box 默认值&#xff0c;也是css2.1中的盒子模型。在计算 width和…

Couchbase:使用Twitter和Java创建大型数据集

在播放/演示Couchbase或任何其他NoSQL引擎时&#xff0c;创建大型数据集的一种简单方法是将Twitter feed注入到数据库中。 对于这个小应用程序&#xff0c;我正在使用&#xff1a; Couchbase Server 2.0服务器 Couchbase Java SDK &#xff08;将由Maven安装&#xff09; T…

查找标题已知的窗口句柄,遍历窗口控件句柄

有了回调函数的概念及上面的例子,我们可以继续了。其实想要找到一个标题已知的窗口句柄,用一个API函数就可以了:FindWindow. 其函数原形是: function FindWindow(lpClassName, lpWindowName: PChar): HWND; stdcall; lpClassName:窗口类名.如果只知道标题,可以为空.窗口类名可以…