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 ...
随机推荐
- centos升级gcc
https://blog.csdn.net/lanwilliam/article/details/77893033 [root@DS-VM-Node239 ~]# yum install centos ...
- 用canvas画布画一个画板
前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...
- tinymce与prism代码高亮实现及汉化的配置
简单介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成.它对IE6+和Firefox1.5+都有着非常良好的支持.功能方强大,并且功能配置灵活简单.另一特点是加 ...
- https经过ngxin在web服务器收到http请求
一. 问题描述: nginx代理nexus的时候页面不全,部分https地址自动转成http了,使用方案四解决的 浏览器输入https://www.mysite.com,后台通过request.get ...
- jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...
- Hibernate 干货
一 .hibernate概念: hibernate应用在javaee 三层框架中的dao层(web 层 --service层--dao层),在dao层实现对数据库的CRUD操作.hibernate是对 ...
- php全局变量漏洞 $GLOBALS
在Discuz代码中有这么一段: if (isset($_REQUEST[‘GLOBALS’]) OR isset($_FILES[‘GLOBALS’])) { exit(‘Request tain ...
- RecyclerView的通用适配器
本来这一个主题应该早就写了,只是项目多,属于自己的时间不多,所以现在才开动!! 前一段时间写了一篇文章,是关于ListView,GriView万能适配器,没有看过的同学,可以先看看那篇文章,然后在来学 ...
- 替代iframe新逻辑
使用ajax请求.下面是代码逻辑 $.ajax({ url:url, type:'get', dataType: "text", success:function(msg){ $( ...
- 创建一个简单的maven的web程序
最近学习Hadoop,发现学习要想用hadoop作为后台运行web程序,必须应用maven,所以学习了今天学习了一下maven,然后搭建了一个简单的web程序 首先我使用的是eclipse中自带的ma ...