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>
height百分比失效的更多相关文章
- 剖析height百分比和min-height百分比
height的百分比 当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效. &l ...
- CSS布局与定位——height百分比设置无效/背景色不显示
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...
- height百分比以及高度自适应问题
1. 你曾经是否说想要 高度占页面或者占div百分比无效的问题,相信你也搜索过了,就是说 需要 设置父亲父亲一直到祖宗html都要设置百分比,才有效果. 总之一句话:想用百分比设置他的高度,则它的父 ...
- css height:100%失效
有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的. 经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的.所以解决方法就是在body和 ...
- flex引起height:100%失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 使min-height子元素height百分比生效的2种方式
方式1,使用flex <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- 如何让 height:100%; 起作用---父级元素必须设定高度
参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...
随机推荐
- Linux socat轻松实现TCP/UDP端口转发
1.TCP端口转发 socat -d TCP4-LISTEN:,reuseaddr,fork TCP4: 2.UDP端口转发 socat -T UDP4-LISTEN:,reuseaddr,fork ...
- system.data.oracleclient 需要 8.17 需要oracle客户端问题
1.下载 2.程序引用 Oracle.DataAccess.dll 其他引用放在debug下
- java 基础解析
http://www.cnblogs.com/-new/tag/java%E5%9F%BA%E7%A1%80%E8%A7%A3%E6%9E%90/
- LG的nexus5(32GB版本 - 821)-TOT-底包 可用于救砖!
LG的nexus5(32GB版本 - 821)-TOT-底包 底层修复效果完美,通过LGflashTool1.8直接刷进去就行~ 底包下载: https://pan.baidu.com/s/1Z5WD ...
- ZooKeeper学习1---简单介绍
一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同 ...
- Win10桌面图标无法拖动
1.右键桌面>查看>取消自动排列 2.桌面多按几次Esc 3.gpedit.msc “用户配置/管理模板/Windows组件/任务计划程序/禁止拖放>改为未配置
- linux中文件句柄数问题
问题描述: 有时候业务比较繁忙时,就会出现如下问题 too many open files:顾名思义即打开过多文件数.不过这里的files不单是文件的意思,也包括打开的通讯链接(比如sock ...
- Spring注解大全,汇总版
Spring使用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...
- Saiku 系列
1.Saiku2.6 Saiku315 链接SQL的JDBC字符串 2.Saiku2.6 配置数据源 3.Saiku2.6 保存查询后,重新打开报 Error Loading Query错误. 4.C ...
- Android Studio如何配置adb以及常用命令
https://blog.csdn.net/google_huchun/article/details/53314046 用Android Studio一年多了,都没有使用其调试adb,今天就分享ad ...