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百分比失效的更多相关文章

  1. 剖析height百分比和min-height百分比

    height的百分比 当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效. &l ...

  2. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

  3. height百分比以及高度自适应问题

    1.  你曾经是否说想要 高度占页面或者占div百分比无效的问题,相信你也搜索过了,就是说 需要 设置父亲父亲一直到祖宗html都要设置百分比,才有效果. 总之一句话:想用百分比设置他的高度,则它的父 ...

  4. css height:100%失效

    有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的. 经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的.所以解决方法就是在body和 ...

  5. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 使min-height子元素height百分比生效的2种方式

    方式1,使用flex <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. IE6 行内定义成块元素后高度失效

    问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...

  8. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  9. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

随机推荐

  1. Myeclipse文件没出错,但是项目上显示有错的解决办法

    因工作原因,同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源代码,打成压缩包,发给我.我解压后,使用myeclipse开发工具,通过导入,将项目导入到我的开发工具中,这个时候有一个问 ...

  2. Docker 搭建 etcd 集群配置

    #关闭selinux.防火墙 systemctl stop firewalld.service systemctl disable firewalld.service firewall-cmd --s ...

  3. web负载均衡【总结归纳所有看过的资料的理论】

    web负载均衡 在有些时候进行扩展是显而易见的,比如下载服务由于带宽不足而必须进行的扩展,但是,另一些时候,很多人一看到站点性能不尽如人意,就马上实施负载均衡等扩展手段,真的需要这样做吗?当然这个问题 ...

  4. 九、基础正则表达式BRE

    1.重要性:简单的说正则表达式就是处理一套字符串的规则和方法,以行为单位对字符串进行处理. 运维工作中,会有大量的访问日志,错误日志,大数据学习正则表达式是不可少的. 2.linux正则表达式,主要是 ...

  5. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. java实际项目中interface和abstract interface 区别

    参考:https://zhidao.baidu.com/question/424485344260391052.html 这2种有什么区别,根据实际项目经验 帮我解答下 谢谢啊~~~~~~~~~问题补 ...

  7. python反转列表的几种方法

    一.使用reversed()函数 a = [1, 2, 3, 4] b = list(reversed(a)) 注意:reversed()函数返回的是一个迭代器,而不是一个List,需要再使用List ...

  8. robot framework学习笔记之九-杂记

    Setup和Teardown 假设Suite1下面有Test1和Test2,若它们都设置了Setup和Teardown,那么它们的执行顺序是:Suite1-Setup->Test1-Setup- ...

  9. [JS] 瀑布流加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. day 10 课后作业

    # -*- coding: utf-8 -*-# @Time : 2019/1/2 16:35# @Author : Endless-cloud# @Site : # @File : 课后作业.py# ...